向 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()，因为样式/属性从一个值过渡到另一个值。

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

要交错节点的出现，请将 .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)
 ;