Question

我有一个数据集，用于定义要在Force Directed Graph中使用的多个节点。它看起来像......

  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”的“节点1”作为主要根或焦点节点？

Answer 1

如果您只需要根节点，则可以在对象中具有root属性并将其设置为true，而不是单独处理该节点。您也可以将此根设置为居中。以下是我们如何做到的（d3 + Prototype - 当时 - 现在切换到d3 + jQuery +下划线）：

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，下划线）来处理诸如detect或include等简单方法或其他类似的Ruby样式方法。

Answer 2

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

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

如何在D3.js Force Directed Graph中设置焦点节点？

2 个答案: