Javascript d3條形圖表不起作用

我正在關注帶有d3框架的Bar Chart的Mike Bostock教程。我想從elasticsearch響應中製作條形圖。當他的代碼中的一行無法正常工作時，我正面臨問題。我的代碼：Javascript d3條形圖表不起作用

HTML：index.html的

<body> 
    <script type="text/javascript"> 
     ping(); 
     query1(); 
     query2(); 
     query3(); 
    </script> 
    <div id="bar-chart"></div> 
    <div id="pie-chart"></div> 
    <div id="bar-chart2"></div> 
</body>

的JavaScript： main.js

function query3() { 
    client.search({ 
     index: 'twitter', 
     body: { 
      size: 0, 
      query: { 
      query_string: { 
       query: "*" 
      } 
      }, 
      aggs: { 
      touchdowns: { 
       terms: { 
       field: "user.screen_name", 
       size: 10, 
       order: { 
        _count: "desc" 
       } 
       } 
      } 
      } 
     } 
    }).then(function (resp) { 
     var data = resp.aggregations.touchdowns.buckets; 
     console.log(data); 

     // d3 donut chart 
     var canvas2 = d3.select("#bar-chart2").append("svg") 
      .attr("width", 960) 
      .attr("height", 500) 

     var svg = d3.select("svg"), 
      margin = {top: 20, right: 20, bottom: 30, left: 40}, 
      width = +svg.attr("width") - margin.left - margin.right, 
      height = +svg.attr("height") - margin.top - margin.bottom; 
// HERE IS THE PROBLEM !!!!!!!! 
     console.log("test") 
     var x = d3.scaleBand().rangeRound([0, width]).padding(0.1), 
      y = d3.scaleLinear().rangeRound([height, 0]); 
     console.log("test1") 
     var g = svg.append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

      x.domain(data.map(function(d) { return d.key; })); 
      y.domain([0, d3.max(data, function(d) { return d.doc_count; })]); 

      g.append("g") 
       .attr("class", "axis axis--x") 
       .attr("transform", "translate(0," + height + ")") 
       .call(d3.axisBottom(x)); 

      g.append("g") 
       .attr("class", "axis axis--y") 
       .call(d3.axisLeft(y).ticks(10, "%")) 
      .append("text") 
       .attr("transform", "rotate(-90)") 
       .attr("y", 6) 
       .attr("dy", "0.71em") 
       .attr("text-anchor", "end") 
       .text("Frequency"); 

      g.selectAll(".bar") 
      .data(data) 
      .enter().append("rect") 
       .attr("class", "bar") 
       .attr("x", function(d) { return x(d.key); }) 
       .attr("y", function(d) { return y(d.doc_count); }) 
       .attr("width", x.bandwidth()) 
       .attr("height", function(d) { return height - y(d.doc_count); }); 
    }, function (err) { 
     console.trace(err.message); 
    }); 
}

輸出：控制檯：

test

數據對象：

[{key: "carfindlychevy", doc_count: 12243}, {key: "carfindlyjeep", doc_count: 9876}, {key: "carfindlycali", doc_count: 7879}, {key: "carfindlyny", doc_count: 7737}, {key: "carfindly", doc_count: 7287}, {key: "carstexas", doc_count: 6663}, {key: "carfindlyfl", doc_count: 6617}, {key: "carfindlyaudi", doc_count: 6061}, {key: "carfindlymer", doc_count: 5604}, {key: "carfindlybmw", doc_count: 5480}]

我正在使用macOSx + Safari。我希望我提供了所有必要的信息，謝謝你的建議。

來源

2017-02-24 bzadm

也許分享您的數據看起來可能會有幫助嗎？ – mrkre

將您的JavaScript代碼放在所有HTML元素的末尾，您的代碼是正確的，但是它在HTML元素初始化之前執行，並且因爲它無法找到bar-chart2和/或svg。

編輯：

從你的截圖我看你使用V2。 D3版本和諸如scaleBand之類的函數在V4之前不存在一些變化。因此，在導入時使用V4：

<script src="https://d3js.org/d3.v4.js"></script>

來源

2017-02-24 17:33:11 merterpam

我編輯了這樣的代碼：http://imgur.com/a/Z4W0Y但沒有新的事情發生。奇怪的是，以前的圖表工作正常。第一個圖表來自查詢1，第二個來自查詢2等等。 – bzadm

我根據您的屏幕截圖進行了另一次編輯，這次看起來像版本問題@bzadm – merterpam

謝謝您的解決方案。現在我的其他圖表不工作，因爲他們使用舊版本的d3.js，但至少我知道問題在哪裏，所以我會嘗試修復它們。 @Vacece – bzadm

Javascript d3條形圖表不起作用

回答

相關問題