Javascript 如何在D3.js力定向图中设置焦点节点?

Javascript 如何在D3.js力定向图中设置焦点节点?,javascript,d3.js,force-layout,Javascript,D3.js,Force Layout,我有一个数据集,它定义了在力定向图中使用的许多节点。看起来 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",

我有一个数据集,它定义了在力定向图中使用的许多节点。看起来

  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”作为主根节点或焦点节点?

如果您只需要根节点,则可以在对象中拥有根属性并将其设置为true,而不是单独处理该节点。也可以将此根设置为中心。下面是我们是如何做到的(d3+原型-当时-现在切换到d3+jQuery+下划线):

我们就是这样做的。但是我不清楚你的例子中的链接是什么。。。有点困惑。
您会注意到,对于强制导向布局或更复杂的动画,您几乎总是需要使用D3+其他东西(Prototype、jQuery、下划线)作为简单方法,如detect或include或其他类似Ruby风格的方法。

我不确定您所说的焦点或根节点是什么意思。如果要在特定位置(例如中心)固定某个节点,可以将其“固定”属性设置为true。有关更多信息,请参阅,以及


我不认为您的示例显示d3隐式使用节点列表中的第一个节点作为“根”节点。由于网络结构的原因,示例中的节点1始终向中心移动。如果稍后将节点1放置在节点数组中,则其行为相同

作为旁注:在进行任何严重的力导向布局时,您还需要一些辅助方法来帮助您放置所需的节点,帮助您以特定方式过滤或绘制节点,以及进行力设置。。。许多助手方法可能会使用我提到的3个库中的一个:)嗨。谢谢你的回复。找到中心的好消息。就根节点而言,D3似乎隐式地使用节点列表中的第一个节点(即上述节点数组中的“节点1”)作为其根节点。您可以在我在创建的示例中看到这一点。似乎没有明确的方法告诉它使用不同的节点作为力定向图的根。我最好的朋友,弗兰克
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...
}