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条形图表不起作用

回答

相关问题