У меня есть массив, содержащий идентификаторы узлов, которые необходимо отобразить. Массив выглядит как 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});
}
Если у вас уже есть позиция вашего узла, вы должны добавить его к своим данным
{name: 1887, x: 40, y: 5}
Затем вы можете просто повторно использовать их
.attr("x", function(d) {
return d.x;
})
.attr("y", function(d) {
return d.y;
})