Как установить фокальный узел в графике силы D3.js?

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"}
  ];

Как конкретно указать force.layout в библиотеке d3.js использовать "Узел 1" id = "N1" в качестве основного корневого или фокусного узла?

Answer 1

Если вам нужен только корневой узел, вы можете иметь корневое свойство в вашем объекте и установить его в значение 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, подчеркивание) для простых методов, таких как обнаружение или включение, или других подобных методов стиля Ruby.

Answer 2

Я не уверен, что вы подразумеваете под фокусным или корневым узлом. Если вы хотите зафиксировать определенный узел в определенном месте (например, в центре), вы можете установить для его атрибута "fixed" значение true. Для получения дополнительной информации см. Fix Fix Node Position в D3 Force-Directed Layout, а также Перемещение фиксированных узлов в D3.

Я не думаю, что ваш пример силового ориентированного радиального графа показывает, что d3 неявно использует первый узел в списке узлов в качестве корневого узла. Узел 1 в вашем примере всегда тяготеет к центру как следствие структуры сети. Если вы позже поместите Узел 1 в массив узлов, его поведение будет таким же.