在D3中移动固定节点

Question

我在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();
}

Answer 1

力导向布局与实际渲染分离.通常你有一个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使用相同的值,如果您希望节点保持在某个位置.