Question

我有一个包含需要显示的节点ID的数组。该数组看起来像list_of_people = ['1887', '1892', '1888' ...]。

我试图让图形看起来像一个家谱。我已经尝试过Dagre布局，但是节点放置不是我想要的（它接近期望但不包括一些特定的用例），所以我决定手动定位节点。

我为每一代创建了ID数组。例如：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中是否有办法为每个节点提供一定的自定义ID？

在Cytoscape.js中看起来像这样：

for (i=0; i<grandchildren_generation.length; i++){
    x += 100;
    y = 150;
    cy.$('#' + grandchildren_generation[i]).position({x:x, y:y});
}

Answer 1

如果您已经拥有节点的位置，则应将其添加到数据中

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

然后你可以简单地重复使用它们

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

请参阅https://jsfiddle.net/mf1hpjx1/

D3手动定位具有特定ID的节点

1 个答案: