如何在D3强制布局中添加复合节点？

Question

我正在将节点添加到力布局图中,如下所示:

var node = vis.selectAll("circle.node")
    .data(nodes)
    .enter()
    .append("circle")
    .attr("class", "node")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 5)
    .style("fill", function(d) { return fill(d.group); })
    .call(force.drag);

有没有办法将复合SVG元素添加为节点？即我想为每个圆圈添加一个超链接,所以我需要这样的东西:

<a href="whatever.com"><circle ...></circle></a>

Answer 1

创建"复合"元素就像将一个或多个子元素附加到另一个元素一样简单.在您的示例中,您希望将数据绑定到选定的<a>元素,并为每个元素分配<a>一个元素<circle>.

首先,你需要选择"a.node"而不是"circle.node".这是因为您的超链接将成为父元素.如果没有明显的父元素,并且您只想为每个数据添加多个元素,请使用<g>SVG的group元素.

然后,您希望将一个<a>元素附加到输入选择中的每个节点.这会创建您的超链接.设置每个超链接的属性后,您希望为其指定一个<circle>子项.简单:只需打电话.append("circle").

var node = vis.selectAll("a.node")
    .data(nodes);

// The entering selection: create the new <a> elements here.
// These elements are automatically part of the update selection in "node".
var nodeEnter = node.enter().append("a")
    .attr("class", "node")
    .attr("xlink:href", "http://whatever.com")
    .call(force.drag);

// Appends a new <circle> element to each element in nodeEnter.
nodeEnter.append("circle")
    .attr("r", 5)
    .style("fill", function(d) { return fill(d.group); })

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

请记住,D3主要用于选择节点.因此,调用.append()输入选择意味着选择中的每个节点都会获得一个新子节点.功能强大的东西!

还有一件事:SVG有自己的<a>元素,这就是我上面提到的.这与HTML不同!通常,您只将SVG元素与SVG一起使用,将HTML与HTML一起使用.

感谢@mbostock建议我澄清变量命名.

Answer 2

回复Jason Davies(因为stackoverflow限制了回复评论的长度......):很好的答案.但是要注意链接方法; 通常你想node引用外部锚元素而不是内部圆元素.所以我建议一个小变化:

var node = vis.selectAll("a.node")
    .data(nodes)
  .enter().append("a")
    .attr("class", "node")
    .attr("xlink:href", "http://whatever.com")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .call(force.drag);

node.append("circle")
    .attr("r", 5)
    .style("fill", function(d) { return fill(d.group); });

我还用包含锚元素的变换替换了圆的cx和cy属性; 任何一个都会工作.您可以将svg:a元素视为svg:g(两者都是容器),如果您想稍后添加标签,这很好.