Question

我刚开始学习D3，目前正在理解this example。

我正在尝试在图表中的每个节点旁边显示文本。在JSON数据中，有一个名为name的密钥，其中包含来自LesMisérables的字符的名称。我试图使用以下代码在每个节点旁边显示此文本：

var node = svg.selectAll(".node")
        .data(graph.nodes)
        .enter().append("circle")
        .attr("class", "node")
        .attr("r", 5)
        .style("fill", "black")
        .text(function(d) { return d.name;}).style("font-family", "Arial").style("font-size", 12)
        .call(force.drag);

我基本上只是改变了.text来尝试显示文字。任何人都可以解释我如何才能显示文字？提前谢谢。

Answer 1

SVG <circle>元素不会使用.text函数显示您放置在其中的任何文本。显示文本的方法是制作图形SVG <g>元素的节点。然后，这些可以包含<circle>和<text>子元素。

这可能是这样的：

\\create graph nodes using groups
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g").call(force.drag);

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

node.append("text")
.text(function (d) { return d.name; });

您还需要更改力，以便在刻度线上转换群组<g>。

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

您可以在http://jsfiddle.net/vrWDc/19/处看到小图表的实际效果。由于需要渲染的文本量，此方法在应用于大图时可能效率不高。

在D3中显示文字

1 个答案: