javascript - 如何在 d3js 动态图表中的气泡旁边显示名称

Question

在 Mike Bostocks 的示例http://bost.ocks.org/mike/nations/中，有太多的数据，把国家的名字放在那里会使它变得混乱，但对于一个较小的项目，我想展示它。

我在源代码中找到了这个：

var dot = svg.append("g")
  .attr("class", "dots")
.selectAll(".dot")
  .data(interpolateData(2004))
.enter().append("circle")
  .attr("class", "dot")
  .style("fill", function(d) { return color(d); })
  .text(function(d) { return d.name; })
  .call(position)
  .sort(order);

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

但不知何故，一个标题永远不会出现。有人知道如何在气泡旁边显示名称吗？

Answer 1

正如另一个答案所暗示的，您需要将元素组合在一起。此外，您需要附加一个text元素——该title元素仅在 SVG 中显示为工具提示。您正在寻找的代码看起来像这样。

var dot = svg.append("g")
             .attr("class", "dots")
             .selectAll(".dot")
             .data(interpolateData(2004))
             .enter()
             .append("g")
             .attr("class", "dot")
             .call(position)
             .sort(order);
dot.append("circle")
   .style("fill", function(d) { return color(d); });

dot.append("text")
   .attr("y", 10)
   .text(function(d) { return d.name; });

在对 的调用中position，您需要设置transform属性。您可能需要调整text元素的坐标。

Answer 2

不幸的是，在这种情况下，将文本和圆圈组合在一起无济于事。通过更改其位置属性（cx 和 cy）来移动气泡，但元素没有要移动的 x 和 y 位置。它们只能通过变换平移来移动。见：https ://www.dashingd3js.com/svg-group-element-and-d3js

您的选择是：

1) 重写位置函数以计算元素当前位置与其新位置之间的位置差（x 的变化和 y 的变化）并将其应用于 . 这将非常困难。

或 2) 编写一组并行指令来设置和移动标签。就像是：

var tag = svg.append("g")
  .attr("class", "tag")
.selectAll(".tag")
  .data(interpolateData(2004))
.enter().append("text")
  .attr("class", "tag")
  .attr("text-anchor", "left")
  .style("fill", function(d) { return color(d); })
  .text(function(d) { return d.name; })
  .call(tagposition)
  .sort(order);

您将需要一个单独的标记位置函数，因为文本需要“x”和“y”而不是“cx”、“cy”和“r”属性。不要忘记更新“displayYear”函数以更改标签位置。您可能希望从气泡中偏移文本，但确保文本不重叠是一个更复杂的问题：http ://bl.ocks.org/thudfactor/6688739

PS-我称它们为标签，因为“标签”在那个例子中已经意味着什么。

Answer 3

您必须将圆形元素和文本包装在一起，它应该看起来像

<country>
   <circle ></circle>
   <text></text>
</country>