javascript - 仅将 D3 Sankey 图表中的某些节点从矩形转换为圆形

Question

我想重现 D3 Sankey chart using circle node instead of rectangle node 中的过程, 但是，我只想选择某些节点从矩形更改为圆形。

例如，在这个jsfiddle示例中使用，如何只选择节点 4 和 节点 7 转换为圆？

Answer 1

我更新了你的 fiddle .

基本上你只需要一些方法来选择你想要不同的节点。我使用了唯一的类名，这样您也可以使用 CSS 设置它们的样式。我不想编写仅选择 4 和 7 的代码(我很懒)，所以我只是选择了所有偶数节点。

// add in the nodes
var node = svg.append("g").selectAll(".node")
    .data(graph.nodes)
    .enter().append("g")
    .attr("class", function (d, i) { return i % 2 ? "node rect" : "node circle";
})

然后您可以使用它来选择节点并添加圆形而不是矩形。

svg.selectAll(".node.circle").append("circle")
    .attr("r", sankey.nodeWidth() / 2)
    .attr("cy", function(d) { return d.dy/2; })
    .attr("cx", sankey.nodeWidth() / 2)
    .style("fill", function (d) {