D3 вручную позиционирует узлы с определенным идентификатором

1

У меня есть массив, содержащий идентификаторы узлов, которые необходимо отобразить. Массив выглядит как list_of_people = ['1887', '1892', '1888'...].

Я пытаюсь сделать график похожим на генеалогическое дерево. Я пробовал макет Dagre, но размещение узла не было тем, что я искал (он был близок к желаемому, но не охватывал некоторые конкретные варианты использования), поэтому я решил вручную разместить узлы.

Я создал массивы идентификаторов для каждого поколения. Например: grandparent_generation = ['1893', '1889'...], parent_generation = ['1887', '1886'...] и так далее.

То, что я хотел бы сделать, - позиционировать каждое поколение вручную (каждое поколение будет иметь одинаковое значение y и разные значения x для узлов в генерации).

Мой текущий код выглядит примерно так:

var width = 960,
    height = 500;


var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var force = d3.layout.force()
    .size([width, height]);    


force
   .nodes(list_of_people)
   .start();


var node = svg.selectAll(".node")
   .data(list_of_people)
   .enter().append("g")
   .attr("class", "node")


node.append("image")
  .attr("xlink:href", "https://github.com/favicon.ico")
  .attr("x", -8)
  .attr("y", -8)
  .attr("width", 16)
  .attr("height", 16);

и все узлы находятся в одном положении.

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

Есть ли способ в D3, чтобы дать каждому узлу определенный идентификатор настраиваемой позиции?

В Cytoscape.js это будет выглядеть так:

for (i=0; i<grandchildren_generation.length; i++){
    x += 100;
    y = 150;
    cy.$('#' + grandchildren_generation[i]).position({x:x, y:y});
}
  • 1
    Может быть, этот пример поможет вам: bl.ocks.org/mbostock/4339083 . ИМО макет силы не сделан для этого вида дерева
  • 0
    Сделал что-то очень похожее здесь stackoverflow.com/questions/31245751/… может быть полезным.
Показать ещё 1 комментарий
Теги:
d3.js

1 ответ

0
Лучший ответ

Если у вас уже есть позиция вашего узла, вы должны добавить его к своим данным

 {name: 1887, x: 40, y: 5}

Затем вы можете просто повторно использовать их

.attr("x", function(d) {
    return d.x;
})
.attr("y", function(d) {
    return d.y;
})

См. Https://jsfiddle.net/mf1hpjx1/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню