向 d3j 散点图添加过渡

Question

我是 d3j 的新手，正在玩转换。我希望数据点在页面上一个一个地出现。我如何实现这一目标？我尝试插入：

.transition()
.delay(1000)

在本节的不同点：

 var data=[];
 for (var i=0;i<10;i++)
    data.push([Math.floor(Math.random()*30),Math.floor(Math.random()*30)]);

var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);

svg.selectAll("circle")
 .data(data)
 .enter()
 .append("circle")
 .attr("cx",function(d){return xscale(d[0]);})
 .attr("cy",function(d){return yscale(d[1]);})
 .attr("r",function(d){return rscale(d[1]);})
 .attr("fill","teal")
 ;

感谢您的帮助。

Answer 1

.transition() 将动态转换样式或属性。如果您希望您的点以延迟的方式出现，您可以将 r 属性从 0（实际上不可见）转换为新值。在你的代码中看起来像：

svg.selectAll("circle")
 .data(data)
 .enter()
 .append("circle")
 .attr("cx",function(d){return xscale(d[0]);})
 .attr("cy",function(d){return yscale(d[1]);})
 .attr("r", 0)
 .attr("fill","teal")
 .transition()
 .delay(1000)
 .attr("r",function(d){return rscale(d[1]);}) 
 ;

另一种方法是将不透明度从 0 过渡到 1：

svg.selectAll("circle")
 .data(data)
 .enter()
 .append("circle")
 .attr("cx",function(d){return xscale(d[0]);})
 .attr("cy",function(d){return yscale(d[1]);})
 .attr("r",function(d){return rscale(d[1]);}) 
 .attr("fill","teal")
 .style("opacity", 0)
 .transition()
 .delay(1000)
 .style("opacity", 1)
 ;

两者与 .delay() 的效果相同，但与 .duration() 的效果不同，因为 style/attribute 从一个值补间到另一个值。

由于评论中的澄清而添加：

要交错显示节点，请将 .delay() 值与元素的数组位置相关联：

svg.selectAll("circle")
 .data(data)
 .enter()
 .append("circle")
 .attr("cx",function(d){return xscale(d[0]);})
 .attr("cy",function(d){return yscale(d[1]);})
 .attr("r",function(d){return rscale(d[1]);}) 
 .attr("fill","teal")
 .style("opacity", 0)
 .transition()
 .delay(function(d,i) {return i * 100)
 .style("opacity", 1)
 ;

向 d3j 散点图添加过渡

Add a transition to a d3j scatter plot

d3.js