我是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")
 ;

谢谢您的帮助。

#1楼 票数:3 已采纳

.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()效果相同,但在.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)
 ;

  ask by user3259040 translate from so

未解决问题?本站智能推荐:

1回复

无法在d3中添加过渡

我想在d3中设计的垂直栏上添加过渡效果。 我是d3的新手,我曾尝试添加transition()方法,但工作并不安静。 我的代码如下- 我希望条形图一次从一个图的下方出现。 请帮助。
1回复

向d3.drag()行为添加过渡

我即将用 d3.js 完成我的第一个项目。 它计算滑雪者可用的势能,如果所有这些能量都转换为动能,我想计算滑雪者的预期速度。 我想要的最后一件事是在滑雪者掉落时为他添加过渡。 我希望滑雪者始终过渡到右侧的黑色圆圈 (p2)。 过渡的持续时间现在并不重要。 有没有简单的方法来完成这项任务?
1回复

d3j蛇曲路径动画

我有兴趣尝试创建一个受控的弯曲路径。 有没有办法绘制特定的坐标和样式来模仿这样的设计。 我想它是一种2D Donnie Darko时间隧道或slinkey / snake。 更新1 - 旅程路径1 http://jsfiddle.net/0ht35rpb/241/ 更新2 -
1回复

D3J使用呼叫更新错误的元素

我是D3JS的新手,您可以在http://jsfiddle.net/3n8wD/找到代码。 我面临一个问题,任何指点都会有所帮助 当我移动直线时,它会按预期分离,但是当我尝试将圆圈移开时,它会跳回到直线上。 在检查数组时,好像圆数组在我移动链接时正在更新,不确定是什么原因引起的。
2回复

向折线图d3中的不同折线添加过渡

我有一个折线图,其中有两条折线以这种方式调用 我想在两行中添加相同的过渡,过渡如下 实际上,这具有在图表上绘制线条的效果,我怎么称呼它可以绘制两条线条? 谢谢!
1回复

d3j:删除数据集

取消选中复选框时,我想删除一条曲线。 我尝试了一下但没有成功: 第一部分工作正常(即,如果我选中一个复选框,将绘制该文件),但是当我取消选中它时,它不会从svg中删除。 我想我对出口不太了解。 有人可以指出出什么问题吗? 谢谢。 样本jsfiddle代码: http : //js
1回复

如何在d3.js中为上下文菜单的创建和删除添加过渡?

我正在使用D3.js版本 6 创建一个力导向图。对于每个节点,当用户单击它时,将出现一个上下文菜单。 当用户单击其他地方(例如单击 SVG)时,上下文菜单将消失。 它看起来像这样: 没有上下文菜单 带上下文菜单 到目前为止,一切正常。 现在,我想为上下文菜单的创建和删除添加 2 个转换,分别是d3.
1回复

D3J的相似标签/重复项使用相同的x值

我正在使用以下代码。 问题是,如果我的标签具有相同的值,则值将自身连接到现有的x值标签。 阅读了几个答案后,我尝试将xMap函数更改为此,但并没有真正的帮助。 我确定对此的解决方法不太重要,但是我只想将output显示为与阵列相同的条形,并且如果day值重复则不使用相同的x轴位置显示相