我在 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:
这是基于 Jason 的建议的工作函数:
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 事件而不考虑冷却,这可能会很好,但这不是当前的行为)。
正如您在评论中正确指出的那样,如果您手动设置 d.x
和 d.y
, 你还应该设置 d.px
和 d.py
如果您希望节点保持在某个位置,则使用相同的值。
关于javascript - 在 D3 中移动固定节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10502877/