在D3强制定向布局中修复节点位置 [英] Fix Node Position in D3 Force-Directed Layout

问题描述

我想让我的力导向布局中的一些节点忽略力并且基于节点的属性保持在固定位置，同时仍然能够被拖动并且对其他节点施加排斥并且保持它们的链接线。我认为这将是这样简单：

  force.on（tick，function（）{
 vis.selectAll（g.node）
 .attr（transform，function（d）{
 return（d.someAttribute == true）？
translate .xcoordFromAttribute +，+ d.ycoordFromAttribute +）：
translate（+ dx +，+ dy +）
} 
  

我也试图手动设置节点的x和y属性on-tick，如果它受到力的影响，继续浮动到节点的位置。

显然，我有一个基本的误解，如何这应该是工作，所以可能有人指向一个例子，其中一些节点固定在它们的位置（但仍然可拖动），其余的节点是围绕力导向的浮动，所有的链接仍然工作？

<在所需的节点上设置 d.fixed 为true，并初始化 dx 和 dy 到所需位置。这些节点将仍然是模拟的一部分，您可以使用正常的显示代码（例如，设置transform属性）;但是，因为它们被标记为固定的，它们只能通过拖动而不是模拟来移动。

请参阅 force layout 文档以了解更多细节，还可以查看根节点在此示例。

I want some of the nodes in my force-directed layout to ignore the force and stay in fixed positions based on the attribute of the node, while still being able to be dragged and exert repulsion on other nodes and maintain their link lines. I thought it would be as simple as this:

    force.on("tick", function() {
        vis.selectAll("g.node")
            .attr("transform", function(d) {
                return (d.someAttribute == true) ?
                    "translate(" + d.xcoordFromAttribute + "," + d.ycoordFromAttribute +")" :
                    "translate(" + d.x + "," + d.y + ")"
            });
     });

I have also tried to manually set the node's x and y attributes on-tick, but then the links continue to float out to where the node would be if it was affected by the force.

Obviously I have a basic misunderstanding of how this is supposed to work, so could somebody point me to an example where some nodes are fixed in their position (but still draggable) and the rest of the nodes are floating around force-directed-like, and all the links are still working?

解决方案

Set d.fixed on the desired nodes to true, and initialize d.x and d.y to the desired position. These nodes will then still be part of the simulation, and you can use the normal display code (e.g., setting a transform attribute); however, because they are marked as fixed, they can only be moved by dragging and not by the simulation.

See the force layout documentation for more details, and also see how the root node is positioned in this example.

这篇关于在D3强制定向布局中修复节点位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！