[英]Moving fixed nodes in D3
我在D3强制定向布局中设置了节点。 fixed = true。 如果我设置.x或.y值,节点本身不会移动到新位置。
这是我的功能:
function fixNode(idArray, locationX, locationY) {
for ( x = 0; x < idArray.length; x++ ) {
for ( y = 0; y < nodes.length; y++ ) {
if (nodes[y].id == idArray[x]) {
nodes[y].fixed = true;
nodes[y].x = 50;
nodes[y].y = 50;
break;
}
}
}
}
更新1:
这是基于杰森建议的工作函数:
function fixNode(idArray, locationX, locationY) {
for ( x = 0; x < idArray.length; x++ ) {
for ( y = 0; y < nodes.length; y++ ) {
if (nodes[y].id == idArray[x]) {
nodes[y].fixed = true;
nodes[y].x = 50;
nodes[y].y = 50;
nodes[y].px = 50;
nodes[y].py = 50;
break;
}
}
}
tick();
}
力导向布局与实际渲染分离。 通常你有一个tick处理程序,它可以为布局算法的每个“tick”更新SVG元素的属性(关于解耦的好处是你渲染到<canvas>
,或其他东西)。
因此,要回答您的问题,您只需直接调用此处理程序即可更新SVG元素的属性。 例如,您的代码可能如下所示:
var node = …; // append circle elements
var force = d3.layout.force()
.nodes(…)
.links(…)
.on("tick", tick)
.start();
function tick() {
// Update positions of circle elements.
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
所以你可以随时调用tick()
并更新元素位置。
您可能想要调用force.tick()
,但这可以用作force.start()
的同步替代方法:您可以重复调用它,每次调用都会执行布局算法的一个步骤。 但是,有一个内部alpha
变量用于控制内部使用的模拟退火,一旦布局“冷却”,该变量将为0
并且对force.tick()
进一步调用将不起作用。 (不可否认,如果force.tick()
总是触发一个tick事件而不管冷却,那可能会很好,但这不是当前行为)。
正如您在注释中正确指出的那样,如果手动设置dx
和dy
,如果希望节点保持在某个位置,还应该将d.px
和d.py
设置为相同的值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.