向nvd3散点图中的每个点/圆添加文本/标签？答案

【问题标题】：Add text / label to each point / circle in nvd3 scatter plot?向nvd3散点图中的每个点/圆添加文本/标签？
【发布时间】：2017-11-10 01:58:33
【问题描述】：

我按照 nvd3 散点图示例创建了一个散点图：http://nvd3.org/examples/scatter.html

我想做的是在每个圆圈下方显示“大小”属性（来自数据）。我一直在尝试尝试选择所有“g.nv-group”元素然后附加“文本”的各种组合，但没有任何效果。

有什么想法吗？

【问题讨论】：

stackoverflow.com/questions/34279908/… 你可以确定这里的代码sn-p。将d3.select(d).data()[0][1] 更改为您想要显示的内容，例如size。

标签： d3.js svg nvd3.js

【解决方案1】：

如果数据有标签属性和

chart.showLabels(true)

然后this discussion 在已关闭（未合并）的 PR 上建议它应该可以工作。在 lineCharts 上工作。

【讨论】：

【解决方案2】：

我从上面评论的链接中调整了代码，就我而言，这是可行的

d3.selectAll(".nv-group path")[0].forEach(function(d){
      var tf = d3.select(d).attr("transform")
      t = d3.transform(tf).translate;
      t[0] = t[0] +10;//moving the translate x by 5 pixel.
      console.log(d3.select(d).data()[0])//data associated with the point
      d3.select(d.parentNode)
        .append("text")
        .attr("class", "label")
        .text("data: "+ d3.select(d).data()[0][0].size)//putting data
        .attr("transform", "translate("+t[0]+","+t[1]+")");
});

【讨论】：