Question

我正在使用d3框架关注Mike Bostock关于条形图的教程。我想从elasticsearch响应中制作条形图。当他的代码中的一行无缘无故地为我工作时，我正面临着问题。我的代码：

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。我希望我提供了所有必要的信息，感谢您的建议。

Answer 1

将JavaScript代码放在所有HTML元素的末尾，代码是正确的，但是在HTML元素初始化之前执行它，因此无法找到bar-chart2和/或svg。

编辑：

从屏幕截图中我看到你使用的是V2。 D3版本之间存在一些变化，并且在V4之前不存在scaleBand等功能。因此，导入时使用V4：

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

Javascript d3条形图无效

1 个答案: