D3.js中带标记的过渡路径长度使标记消失

时间:2017-05-30 22:52:46

标签: javascript d3.js svg transition

this graph of nodes and shapes created with D3.js我无法制作动画。我想要做的是转换路径的长度,但是当我这样做时,path' s marker-end消失了。

我设法append() svg:animate元素完成了几乎相同的事情,但我认为使用D3' {更好} { {1}}实际设置transition()' path属性。任何人都可以告诉我为什么标记在用d动画时会从路径中消失?

transition()

1 个答案:

答案 0 :(得分:1)

else条件下执行此操作...

paths = graph.selectAll('path')

...你也在选择标记,这不是你想要的。

解决方案:给你的路径一个班级......

.attr("class", "nodes")

...并按该课程选择:

paths = graph.selectAll('.nodes')

或者,创建一个正确的“更新”选项(查看下面的 Post Scriptum )。

这是一个更新的小提琴:https://jsfiddle.net/khukeh13/

PS :我做了一个缓慢的过渡,只是为了让你看到标记正在移动。但是,您仍然在该代码中遇到很多问题(查看控制台中的错误),与当前问题无关,这可能值得一个新问题。错误与switchif的奇怪混合有关,我建议你摆脱它。你不需要:只需创建一个基本的“输入”,“更新”和“退出”选项,这就是惯用的D3方式。