javascript - 如何将多个项目附加到力模拟节点？

Question

我正在使用 D3 v4，但似乎无法将多个项目附加到一个节点。在下面的代码中，我试图让文本与图像一起出现，作为力模拟的一部分。图像和文本都需要在屏幕上一起移动。如果我只附加图像或文本但我无法将它们组合在一起，它会完美地工作。当我运行它时，它只在 Angular 落显示 1 个节点。

this.node = this.d3Graph.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(Nodes)
    .enter()
    .append("svg:image")
    .attr("xlink:href", 'https://seeklogo.com/images/T/twitter-2012-negative-logo-5C6C1F1521-seeklogo.com.png')
    .attr("height", 50)
    .attr("width", 50)
    .append("text")
    .attr("x", 20)
    .attr("y", 20)
    .attr("fill", "black")
    .text("test text");

this.force.on('tick', this.tickActions);

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

    this.force
        .restart()
}

Answer 1

您不能附加 <text>元素到 <image>元素。您必须附加 <text>到 <g> .

最简单的解决方案是打破您的选择:

this.node = this.d3Graph.selectAll(null)
    .data(Nodes)
    .enter()
    .append("g")
    .attr("class", "nodes");

this.node.append("svg:image")
    .attr("xlink:href", 'https://seeklogo.com/images/T/twitter-2012-negative-logo-5C6C1F1521-seeklogo.com.png')
    .attr("height", 50)
    .attr("width", 50);

this.node.append("text")
    .attr("x", 20)
    .attr("y", 20)
    .attr("fill", "black")
    .text("test text");

这里我们使用数据创建<g>输入选择中的元素。然后，给每个 <g>元素，我们附加一个 <image>和一个 <text>作为 child 。