Question

我正在尝试关注Mike Bostock关于d3js（http://mbostock.github.io/d3/tutorial/bar-2.html）的教程，以了解如何动态更新图表，但我遇到了一些障碍。

在我的图表中，我左边的栏，而不是简单地删除，被发送到我的图表后面，我无法找出原因：

JS：

var t = 1297110663, // start time (seconds since epoch)
          v = 70, // start value (subscribers)
          data = d3.range(33).map(next); // starting dataset

          function next() {
            return {
              time: ++t,
              value: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5)))
            };
          }

          setInterval(function(){
            data.shift();
            data.push(next());
            console.log(data);
            redraw();
          }, 1000);

          var w = 20,
              h =80;

          var x = d3.scale.linear()
                  .domain([0, 1])
                  .range([0, w]);
          var y = d3.scale.linear()
                  .domain([0, 100])
                  .rangeRound([0, h]);

          var chart = d3.select(".container").append("svg")
              .attr("class", "chart")
              .attr("width", w * data.length - 1)
              .attr("height", h);

          chart.selectAll("rect")
            .data(data)
          .enter().append("rect")
            .attr("x", function(d, i){ return x(i) - 0.5; })
            .attr("y", function(d) { return h - y(d.value) - .5; })
            .attr("width", w)
            .attr("height", function(d) { return y(d.value); });

          function redraw(){
            console.log(data);
            var rect = chart.selectAll('rect')
              .data(data, function(d){ return d.time; });

            rect.enter().insert("rect")
              .attr("x", function(d, i) { return x(i + 1) - .5; })
              .attr("y", function(d) { return h - y(d.value) - .5; })
              .attr("width", w)
              .attr("height", function(d) { return y(d.value); })

            rect.transition() // Shouldn't I use .update() here?
              .duration(1000)
              .attr("x", function(d, i) { return x(i) - .5; });

            rect.exit().transition()
              .duration(1000)
              .attr('x', function(d, i) { return x(i - 1) - .5})
              .remove();
          }

这是jsfiddle：http://jsfiddle.net/kkMR4/

我不明白的另一件事是我们不使用.update（）的原因？如果我理解正确的话.enter（）用于创建DOM元素，其中数据没有在DOM中找到任何匹配，而.exit（）用于查找不在数据中的DOM元素，所以我不应该使用update（）将所有其他列移到左边？

非常感谢

最佳

Answer 1

问题在于此块：

        rect.exit().transition()
          .duration(1000)
          .attr('x', function(d, i) { return x(i - 1) - .5})
          .remove();

第三行（.attr）重新分配坐标。如果您希望它们真正退出，您可以删除此行。

        rect.exit().transition()
          .duration(1000)
          .remove();

图表未正确更新

1 个答案: