在 D3 中移动固定节点

Moving fixed nodes in D3

本文关键字：节点 移动 D3      更新时间：2023-09-26

我在 D3 强制导向布局中有设置为 .固定 = 真。如果我设置 .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()总是触发滴答事件而不考虑冷却，那可能会很好，但这不是当前的行为(。

正如您在注释中正确指出的那样，如果您手动设置 d.x 和 d.y ，如果您希望节点保持在某个位置，您还应该使用相同的值设置 d.px 和 d.py。

相关文章：