javascript - 使用新数据更新图表不起作用

Question

我正在绘制一个带有一些初始数据的条形图，然后尝试在单击按钮时进行更新。我收到错误“未捕获的类型错误:无法读取未定义的属性‘长度’”。单击更新按钮后发生错误。如何解决此问题并启用更新功能以绘制新的条形图？

<div id="chart"></div>
<button id="update" onclick="update()">Update</button>

D3代码:

    var myData = [21, 3, 5, 21, 15];
    //Width and height
    var w = 250;
    var h = 250;
    var yScale = null;

    function draw(initialData) {
      var xScale = d3.scale.ordinal()
        .domain(d3.range(initialData.length))
        .rangeRoundBands([0, w], 0.05);

      yScale = d3.scale.linear()
        .domain([0, d3.max(initialData)])
        .range([0, h]);

      //Create SVG element
      var svg = d3.select("#chart")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

      svg.selectAll("rect")
        .data(initialData)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
          return xScale(i);
        })
        .attr("y", function(d) {
          return h - yScale(d);
        })
        .attr("width", xScale.rangeBand())
        .attr("height", function(d) {
          return yScale(d);
        })
        .attr("fill", "steelblue");

      svg.selectAll("text")
        .data(initialData)
        .enter()
        .append("text")
        .text(function(d) {
          return d;
        })
        .attr("text-anchor", "middle")
        .attr("x", function(d, i) {
          return xScale(i) + xScale.rangeBand() / 2;
        })
        .attr("y", function(d) {
          return h - yScale(d) + 14;
        })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "white");
    }

    draw(myData);

    var newData = [15, 5, 3, 15, 21];
    //update function
    function update(newData) {
      yScale.domain([0, d3.max(newData)]);

      var rects = d3.select("#chart svg")
        .selectAll("rect")
        .data(newData);

      // enter selection
      rects
        .enter().append("rect");

      // update selection
      rects
        .transition()
        .duration(300)
        .attr("y", function(d) {
          return h - yScale(d);
        })
        .attr("height", function(d) {
          return yScale(d);
        })

      // exit selection
      rects
        .exit().remove();

      var texts = d3.select("#chart svg")
        .selectAll("text")
        .data(newData);

      // enter selection
      texts
        .enter().append("rect");

      // update selection
      texts
        .transition()
        .duration(300)
        .attr("y", function(d) {
          return h - yScale(d) + 14;
        })
        .text(function(d) {
          return d;
        })

      // exit selection
      texts
        .exit().remove();
    }

Answer 1

问题是您的更新函数需要一个数据数组作为参数，但您调用它时没有参数。 您可以像那样使用 d3 添加按钮点击监听器。

d3.select("#update").on("click", function(){ update(newData); })

创建了一个 fiddle为你