d3.js - 如何在 d3 力布局中将节点更改为矩形而不是圆形？

Question

如何在以下 d3 forced directed graph 中将节点更改为矩形而不是圆形?

Answer 1

你必须附加一个 rect SVG 元素而不是 circle .

因此，在脚本中，它显示了以下内容:

var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

你应该把它改成这样:

var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("rect")
      .attr("class", "node")
      .attr("width", 40)
      .attr("height", 20)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

而且，它显示的地方:

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

将其更改为:

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