如何在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位置。它们只能通过transform-translate移动。请参阅：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-我把它们称为标签，因为'label'在这个例子中已经意味着什么。

Answer 3

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

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