7

我刚开始学习 D3，目前正在通过理解这个例子来工作。

我试图让文本显示在图表中的每个节点旁边。在 JSON 数据中，有一个名为 的键name，其中包含《悲惨世界》中一个角色的名称。我正在尝试使用以下代码在每个节点旁边显示此文本：

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尝试显示文本。谁能解释我如何让文本显示？提前致谢。

4

1 回答 1

11

SVG<circle>元素不会显示您使用该.text函数放置在其中的任何文本。显示文本的一种方法是使图形 SVG<g>元素的节点。然后这些可以包含 a<circle>和 a<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/上看到一个小图的实际效果。由于需要渲染的文本量，此方法在应用于大型图形时可能不是很有效。

于 2013-04-26T13:52:59.370 回答