如何在 D3.js 强制有向图中设置焦点节点？答案

【问题标题】：How do I set the focal node in a D3.js Force Directed Graph?如何在 D3.js 强制有向图中设置焦点节点？
【发布时间】：2012-06-04 19:21:28
【问题描述】：

我有一个数据集，它定义了在力有向图中使用的多个节点。好像……

  var nodeSet = [
    {id: "N1", name: "Node 1", type: "Type 1", hlink: "http://www.if4it.com"},
    {id: "N2", name: "Node 2", type: "Type 3", hlink: "http://www.if4it.com/glossary.html"},
    {id: "N3", name: "Node 3", type: "Type 4", hlink: "http://www.if4it.com/resources.html"},
    {id: "N4", name: "Node 4", type: "Type 5", hlink: "http://www.if4it.com/taxonomy.html"},
    {id: "N5", name: "Node 5", type: "Type 1", hlink: "http://www.if4it.com/disciplines.html"}
  ];

如何具体告诉 d3.js 库中的 force.layout 使用 id = "N1" 的 "Node 1" 作为主根或焦点节点？

【问题讨论】：

标签： javascript d3.js force-layout

【解决方案1】：

如果您只想要一个根节点，您可以在对象中拥有一个根属性并将其设置为 true，而不是单独处理该节点。您还可以将此根设置为中心。以下是我们的做法（d3 + Prototype - 当时 - 现在切换到 d3+jQuery+underscore）：

getCenter: function() {
    var center = {
        x : this.width / 2,
        y : this.height / 2
    };
    return center;
}

//later do something like this in your init method:
var first = {
                id : id,
                name : name,
                x : this.getCenter().x,
                y : this.getCenter().y,
                root : true,
                //other properties
            };

//later in your redraw() or other methods you might employ...
//try to find the root node later in the code using something like:
var rootNode = this.nodes.detect(function(node) {
    return node.root;
});

//do something to the root node after you have detected it...
if (rootNode) {
    rootNode.x = rootNode.px = this.getCenter().x;
    rootNode.y = rootNode.py = this.getCenter().y;
    //some other stuff...
}

我们就是这样做的。但是，我不清楚您的示例中的链接是什么……有点困惑。您会注意到，对于强制导向布局或更复杂的动画，您几乎总是需要使用 D3+其他东西（Prototype、jQuery、下划线）来实现简单的方法，例如检测或包含或其他类似的 Ruby 样式方法。

【讨论】：

附带说明：在进行任何严重的强制布局时，您还需要一些辅助方法来帮助您放置所需的节点，帮助您以特定方式过滤或绘制节点，以及也用于强制设置...许多辅助方法可能会使用我提到的 3 个库之一:)
嗨。谢谢回复。找到中心的好信息。就根节点而言，似乎 D3 隐式使用节点列表中的第一个节点（即上述节点数组中的“节点 1”）作为其根。您可以在我在Force Direct Radial Graph 创建的示例中看到这一点。似乎没有明确的方法告诉它使用不同的节点作为力有向图的根。我最好的，弗兰克

【解决方案2】：

我不确定您所说的焦点或根节点是什么意思。如果您想在特定位置（例如中心）修复某个节点，您可以将其 'fixed' 属性设置为 true。有关详细信息，请参阅 Fix Node Position in D3 Force-Directed Layout 和 Moving fixed nodes in D3。

我不认为您的force directed radial graph 示例确实表明 d3 隐式使用节点列表中的第一个节点作为“根”节点。由于网络结构，您示例中的节点 1 始终倾向于中心。如果稍后将节点 1 放置在节点数组中，则其行为是相同的。

【讨论】：