D3:显示网络到达布局,然后停止 [英] D3: Show network reaching layout, then stop force
问题描述
我正在尝试使其D3网络达到良好的布局(alpha达到0)后冻结.我希望力完全停止,即使在拖动节点时也是如此(用户应该能够手动重新排列节点).我想我知道如何通过修改在节点上的mousedown和mouseup上调用的函数来完成此操作的第二部分.但是,我无法保持原始布局并无法正常工作.
I'm trying to get my D3 network to freeze after it reaches a nice layout (alpha reaches 0). I want the force to stop completely, even when a node is dragged (the user should be able to rearrange the nodes manually). I think I know how to do the second part of this, by modifying the functions that are called on mousedown and mouseup for the nodes. However, I can't get the original layout and freezing to work.
我看过静态"强制布局的示例,其中网络是仅在布局完成后显示.但是,我希望网络在达到稳定布局时能够显示.我将其添加到绘制网络的函数的末尾:
I've looked at the examples for "static" force layouts, where the network is displayed only after the layout is completed. However, I want the network to display as it's reaching the stable layout. I added this to the end of the function that draws the network:
while (force.alpha() >0.005) {
force.tick();
}
force.stop();
添加此内容后,直到到达force.stop()
,网络才会显示.有人知道我在打勾"时如何显示它吗?
With this addition, the network doesn't display until it gets to force.stop()
. Does anyone know how I can get it to display while it's "ticking"?
这是我对tick
函数的实现:
function tick(e) {
console.log(force.alpha());
if (force.alpha() <0.05) {
force.stop();
}
var h = svgH;
if (e.alpha < 0.05) {
var q = d3.geom.quadtree(nodes),
i = 0,
n = nodes.length;
while (++i < n) {
q.visit(collide(nodes[i], e.alpha));
}
}
path.attr("d", function(d) {
// Total difference in x and y from source to target
diffX = d.target.x - d.source.x;
diffY = d.target.y - d.source.y;
// Length of path from center of source node to center of target node
pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));
// x and y distances from center to outside edge of target node
offsetX = (diffX * d.target.radius) / pathLength;
offsetY = (diffY * d.target.radius) / pathLength;
if (d.target.y < d.source.y) {
var avgY = (d.target.y + d.source.y)/2;
if (d.target.fixed != true) {
d.target.y = avgY;
}
if (d.source.fixed != true) {
d.source.y = avgY;
}
}
return "M" + d.source.x + "," + d.source.y + "L" + (d.target.x - offsetX) + "," + (d.target.y - offsetY);
});
// Keep circles within bounds of screen
var r = 6;
circle.attr("cx", function(d) { return d.x = Math.max(r + d.radius, Math.min(w - r, d.x)); })
.attr("cy", function(d) {
return d.y = Math.max(d.radius, Math.min(h - d.radius, d.y));
});
text.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
推荐答案
在tick
事件处理程序中检查停止条件-这样,您可以在每个刻度线处重新绘制网络并停止.
Check the stop condition in the tick
event handler -- this way you can redraw the network on each tick and stop.
这篇关于D3:显示网络到达布局,然后停止的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!