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)
 ;

添加到d3j散点图的过渡

1 个答案: