我正在使用d3的强制布局,并希望在事件触发器上移动节点。
我创建了一个显示所需功能的a minimal block here。
如您所见,单击按钮时,节点会快速移动到新位置。我想放慢速度。我玩过documentation中指定的(我认为是)相关属性的组合(例如alpha
,alphaDecay
,velocityDecay
),但无济于事。
回顾一下:如何在位置更新时使节点移动得更慢?
谢谢!
您可能想要使用高速衰减。值0.9将使得嘀嗒声减慢到其速度的0.1,“在嘀嗒声中施加任何力之后,每个节点的速度乘以1 - [速度]衰减。(docs)”。这肯定会减缓运动。在大多数情况下,0.9的值可能是过度的。
然而,与此相结合,我们需要确保alpha衰减很低:如果alpha衰减太高,模拟将在节点到达其终点之前冷却。我在下面的例子中使用了0.0005,
最后,为了解决重新定位时模拟的跳跃问题,我降低了alpha值以减少抖动的出现,当然,你移动alpha越低,alphaDecay越低,必须支持相同持续时间的模拟冷却时间。
使用如下:
const width = 500
const height = 500
const svg = d3.select("svg")
const trtCenter = width / 5
const cntrlCenter = width / 1.5
let sampleData = d3.range(24).map((d,i) => ({r: 40 - i * 0.5}))
// define force
let force = d3.forceSimulation()
.force('charge', d3.forceManyBody().strength(1))
force.force('x', d3.forceX().strength(.3).x( width / 2))
force.force('y', d3.forceY().strength(.3).y(height / 3.5))
.force('collision', d3.forceCollide(d => 12))
.nodes(sampleData)
.on('tick', changeNetwork)
let dots = svg.selectAll('.dot')
.data(sampleData)
.enter()
.append('g')
.attr('class', 'dot')
.attr('group', (d,i) => i % 2 == 0 ? 'trt' : 'ctrl')
.append('circle')
.attr('r', 10)
.attr('fill', (d,i) => i % 2 == 0 ? 'pink' : 'olive')
.attr('stroke', 'black')
.attr('stroke-width', .4)
function nodeTreatmentPos(d) {
return d.index % 2 == 0 ? trtCenter : cntrlCenter;
}
function changeNetwork() {
d3.selectAll('g.dot')
.attr('transform', d=> `translate(${d.x}, ${d.y})`)
}
//
function moveNodes() {
force.force('center', null)
.force('collision', d3.forceCollide(d => 12))
.alphaDecay(.0005)
.velocityDecay(0.6)
force.force('x', d3.forceX().strength(1).x(nodeTreatmentPos))
force.force('y', d3.forceY().strength(1).y(height / 3.5))
force.alpha(.1).restart();
}
// force for center
function moveCenter() {
force//.force('center', null)
.force('collision', d3.forceCollide(d => 12))
.alphaDecay(.0005)
.velocityDecay(0.6)
force.force('x', d3.forceX().strength(1).x( width / 2))
force.force('y', d3.forceY().strength(1).y(height / 3.5))
force.alpha(.1).restart();
}
// resolve locations of node on cliks
let toCenter = true;
d3.select('#clickMe')
.on('click', function() {
toCenter === true ? moveNodes() : moveCenter()
toCenter = !toCenter
})
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js'></script>
<button id="clickMe" type="button">Move Nodes</button>
<svg id="svg" width="1200" height="500"></svg>