添加转换到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) 
;