D3.js更新与过渡

Question

我使用以下代码更新用d3v4创建的条形图:

d3.select("button.add")
        .on("click", function(){
            dataset.push(Math.floor(Math.random() * 30) + 5);
            xScale.domain(d3.range(dataset.length))
                    .rangeRound([0, w])
                    .padding(0.2);
            yScale.domain([0, d3.max(dataset)]);
            var bars = svg.selectAll("rect")
                            .data(dataset);
            bars.enter()
                .append("rect")
                .attr("class", "bar")
                .attr("x", w)
                .attr("y", function(d){return yScale(d);})
                .attr("width", xScale.bandwidth())
                .attr("height", function(d){return h - yScale(d)})
                .attr("fill", function(d){
                    return 'rgb('+d*3 + ',' + d*6 + ',' + d*9 + ')';
                });
            bars.transition()
                .delay(function(d, i){
                    return(i*1500) / dataset.length;
                })
                .duration(500)
                .ease(d3.easeLinear)
                .attr("x", function(d, i){ return xScale(i);})
                .attr("y", function(d) {return yScale(d);})
                .attr("width", xScale.bandwidth())
                .attr("height", function(d) {return h - yScale(d);});
        });

虽然添加了数据，也创建了rect元素，但数组中最新添加的元素不会发生转换。它只在添加了下一个元素而该元素的过渡没有发生时才会发生。

谁能提供任何提示，什么可能会出错??

Thanks in advance.

Answer 1

由于这是D3 v4，您必须对选择进行merge。

每当你在数据数组中输入一个新值时，你的"enter"选择就有一个元素。然而，对于这个新元素，过渡不会发生，因为您使用bars调用过渡，除非您使用merge选择，否则bars不包含"enter"选择。

所以，你的"enter" + "update"选项应该是:

 bars.enter()// <-- this is just the "enter" selection
     .append("rect")
     .attr("class", "bar")
     .attr("x", w)
     .attr("y", function(d){return yScale(d);})
     .attr("width", xScale.bandwidth())
     .attr("height", function(d){return h - yScale(d)})
     .attr("fill", function(d){
         return 'rgb('+d*3 + ',' + d*6 + ',' + d*9 + ')';
      })
     .merge(bars)// <-- merge the selections: from now on, "enter" + "update"
     .transition()
     .delay(function(d, i){
         return(i*1500) / dataset.length;
     })
     .duration(500)
     .ease(d3.easeLinear)
     .attr("x", function(d, i){ return xScale(i);})
     .attr("y", function(d) {return yScale(d);})
     .attr("width", xScale.bandwidth())
     .attr("height", function(d) {return h - yScale(d);});

我知道这是"奇怪的"，但如果你停下来想想，旧D3 v3处理更新选择的方式是错误的，而不是这个新的v4方式。毕竟，bars不包含"enter"选项。

根据Mike Bostock:

D3 2.0引入了地址[…]复制:添加到输入选项会复制输入元素到更新选项中。因此，在添加到输入选择之后应用于更新选择的任何操作将同时应用于输入和更新元素，并且可以消除重复代码[…]这使得可用性更差。D3 4.0删除了enter.append.

的魔力

(来源:https://medium.com/@mbostock/what-mak-softwa-good -943557f8a488#.293tkrlfo，强调我的)