Question

我正在使用D3 v4，似乎无法将多个项目附加到节点。在下面的代码中，我试图让图像作为我的力模拟的一部分与图像一起出现。图像和文本都需要在屏幕上一起移动。如果我只附加图像或文本但它无法将它们分组，它的效果非常好。当我运行它时，它只在角落显示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>作为子项附加。

如何将多个项目附加到强制模拟节点？

1 个答案: