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

4

У меня есть набор данных, который определяет количество узлов для использования в 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» в качестве основного корневого или фокусного узла?

Ваш Ответ

2   ответа
3

вы можете иметь корневое свойство в вашем объекте и установить его в значение 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.

как примечание: при выполнении любых серьезных силовых макетов вам также понадобятся некоторые вспомогательные методы, которые помогут вам разместить узлы, где вы хотите, чтобы помочь вам отфильтровать или нарисовать узлы особым образом, а также для настроек силы. Многие из этих вспомогательных методов, вероятно, будут использовать одну из 3 библиотек, которые я упомянул:) paxRoman
Здравствуй. Спасибо за ответ. Хорошая информация о поиске центра. Что касается корневого узла, кажется, что D3 неявно использует первый узел в списке узлов (то есть «Узел 1» в приведенном выше массиве узлов) в качестве своего корневого узла. Вы можете увидеть это в примере, который я создал на Force Direct Radial Graph. Похоже, что нет явного способа сказать ему использовать другой узел в качестве его корня для силового ориентированного графа. Мой лучший, Фрэнк Information Technology
3

что вы имеете в виду под фокальным или корневым узлом. Если вы хотите зафиксировать определенный узел в определенном месте (например, в центре), вы можете установить для его атрибута «fixed» значение true. Для получения дополнительной информации см. Исправить положение узла в D3-силовой компоновке, а также Перемещение фиксированных узлов в D3.

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

Похожие вопросы