Question

我尝试使用d3.js创建一个条形图，以显示针对不同城镇的人口，但是，当我尝试在两个不同的数据集之间创建转换时，我发现了在tsv格式中），d3.js不会触发并触发动画到第二组数据。我不确定我做错了什么。

这是我目前的代码。

<div id="options">
 <button id="set1">2016</button>
 <button onclick="update2021()" id="set2">2021</button>
 <button id="set2">2026</button>
 <button id="set2">2031</button>
 <button id="set2">2036</button>
 <button id="set2">2041</button>
 <button id="set2">2046</button>
 <button id="set2">2050</button>
 <svg width="3000" height="500"></svg>

<script>
    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;

    var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
        y = d3.scaleLinear().rangeRound([height, 0]);

    var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.tsv("sydtest.tsv", function(d) {
      d.population = +d.population;
      return d;
    }, function(error, data) {
      if (error) throw error;

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

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

    // Y-Axis Code
      g.append("g")
          .attr("class", "axis axis--y")
          .call(d3.axisLeft(y).ticks(25))

      g.selectAll(".bar")
        .data(data)
        .enter().append("rect")
          .attr("class", "bar")
          .attr("x", function(d) { return x(d.lga); })
          .attr("y", function(d) { return y(d.population); })
          .attr("width", x.bandwidth())
          .attr("height", function(d) { return height - y(d.population); });
    });

function update2021() {
         // Get the data again
            d3.tsv("sydtest.tsv", function(d) {
              d.population = +d.population;
              return d;
            }, function(error, data) {
              if (error) throw error;

        // Scale the range of the data again 
        x.domain(data.map(function(d) { return d.lga; }));
        y.domain([0, d3.max(data, function(d) { return d.population; })]);

    // Select the section we want to apply our changes to
    var svg = d3.select("svg").transition();

    // Make the changes
        svg.select(".bar")   // change the line
            data(data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return x(d.lga); })
            .attr("y", function(d) { return y(d.population); })
            .attr("width", x.bandwidth())
            .attr("height", function(d) { return height - y(d.population); });
        svg.select("axis--x") // change the x axis
            .duration(750)
            .call(g);
        svg.select("axis--y") // change the y axis
            .duration(750)
            .call(g);
    });
}
</script>

我已经按照之前编写的一些代码进行了操作，发现我可以让y轴和x轴动画，但是它自己实际上不会在画布上渲染的数据。从这一点我推断出我可能已经写过了“过渡期”＃39;我的部分代码错了。

如果有人能告诉我我是否错误地实施了转换代码，我将不胜感激！

使用D3.js创建一个条形图，通过加载tsv数据来转换按钮单击

0 个答案: