应用链接后,d3 v4力图不会停止移动

时间:2017-08-26 07:36:03

标签: d3.js

我有这个代码工作得很好,除了我可以想出停止使其旋转的唯一方法是调高velocityDecay,这使动画成为引入新节点时非常慢的点 - 并没有真正稳定动画 - 它总是略微移动。

这里是代码的相关部分(或告诉我是否还有其他重要组件):

```

60     let simulation = d3.forceSimulation()
61       .force('link', d3.forceLink() 
62         .id((d) => { return d.index + 1 })
63         .distance(200)
64         .strength(1))
65       .force('charge', d3.forceManyBody())
66       .force('x', d3.forceX())
67       .force('y', d3.forceY())
68       .alphaTarget(1)
69       .on('tick', ticked)
70       .force('center', d3.forceCenter(window.innerWidth/2, window.innerHeight/2))
71       .force('collide', d3.forceCollide( (d) => { return 150 }).iterations(16))
72     
73     svg.append('g').attr('class', 'links')
74     
75     let link = svg.select('.links')
76       .selectAll('.link')
77       .data(links)
78       .enter().append('path')
79       .attr('class', 'link')
80       .attr('fill', 'transparent')
81       .attr('stroke', 'black')
82       .attr('stroke-width', '10px')
83       .exit()
84       .remove()




107       link = link.data(links)
108         .enter().append('path')
109         .attr('class', (d) => {
110           return 'link link-' + d.source + '-' + d.target
111         })
112         .attr('fill', 'transparent')
113         .attr('stroke', 'black')
114         .attr('stroke-width', '10px')
115         .merge(link)
116       link.exit().remove()




147       simulation.nodes(nodes)
148         .on('tick', ticked)
149       simulation
150         .force('charge', d3.forceManyBody())
151         // .force('center', d3.forceCenter(window.innerWidth/2, window.innerHeight/2))
152         // .force('collide', d3.forceCollide( (d) => { return 150 }).iterations(156))
153         // .alphaTarget(1)
154         .alphaDecay(.5)
155         // .alpha(1)
156         // .velocityDecay(.95)
157         .force('link', d3.forceLink()
158           .id((d) => { return d.index + 1})
159           .distance(200)
160           .iterations(20)
161           .strength(1))
162         .force('x', d3.forceX())
163         .force('y', d3.forceY())
164         .force('link').links(links)
165       simulation.restart()

```

0 个答案:

没有答案