Fatal编程技术网
  • javascript/
  • Javascript 如何在有向力图D3中创建节点动画？

Javascript 如何在有向力图D3中创建节点动画？

javascript animation d3.js

Javascript 如何在有向力图D3中创建节点动画？,javascript,animation,d3.js,Javascript,Animation,D3.js,我试着在D3中创建一个有向力图，代码到此结束 这就是我想要实现的目标： 根据阶段：true，动画应该发生。例如，在上述代码中，前两个标签属于stage作为true： var nodes = [ {label: '1st stage', x: constant, y: 215 , width:70,height:50 , color :color , stage: true }, {label: '2nd stage', x: constant + 150 ,

我试着在D3中创建一个有向力图，代码到此结束

这就是我想要实现的目标：

根据
阶段：true
，动画应该发生。例如，在上述代码中，前两个标签属于
stage
作为
true
：

 var nodes = [
        {label: '1st stage', x:   constant, y: 215 , width:70,height:50 , color :color , stage: true },
        {label: '2nd stage', x: constant + 150 , y: 215 ,width:80,height:50 ,color :color, stage: true },
   . . .
因此，动画应该像“第一阶段矩形变大并标记为绿色和箭头动画，如果
阶段
为真，则下一个矩形将显示相同的动画

目前我正在模拟这个过程，通过点击矩形上的
点击
，检查
舞台
，并为其呈现绿色。但是这个过程现在需要是一个动画

我想将这些行标记为箭头，我尝试了以下方法：


var link = svg.selectAll('.link')
    .data(links)
    .enter().append('line')
    .attr('class', 'link')
    .attr("stroke-width", "10")
    .style("opacity", "1.2")
    .style("marker-end",  "url(#suit)")


但显示的线仍然是正常线，但不是箭头

如何制作这些动画和箭头