d3.js:如何为图上的散点添加标签

d3.js: How to add labels to scatter points on graph

本文关键字：添加 加标签 js d3      更新时间：2023-09-26

我正在尝试为该图上的散点添加标签：http://bost.ocks.org/mike/d3/workshop/dot-chart.html

我以为稍微修改一下这个代码就可以了，但没有：

svg.selectAll(".dot")
  .append("text")
  .text("fooLabelsOfScatterPoints");

Mike Robinson，您的示例起到了帮助作用。

对于那些想知道的人，以下是我所做的：

我删除了：

svg.selectAll(".dot")
  .data(data)
  .enter().append("circle")
  .attr("class", "dot")
  .attr("cx", function(d) { return x(d.x); })
  .attr("cy", function(d) { return y(d.y); })
  .attr("r", 12);

并添加：

var node = svg.selectAll("g")
                .data(data)
                .enter()
                .append("g");
node.append("circle")
  .attr("class", "dot")
  .attr("cx", function(d) { return x(d.x); })
  .attr("cy", function(d) { return y(d.y); })
  .attr("r", 12);
node.append("text")
  .attr("x", function(d) { return x(d.x); })
  .attr("y", function(d) { return y(d.y); })
  .text("fooLabelsOfScatterPoints");

我在"g"标记上附加了"text"标记，而不是在"circle"标记上添加"text"标签。

当我尝试节点解决方案时，我的一些数据消失了（？），所以我只添加了一个名为"dodo"的新类，它对我有效：

svg.selectAll(".dot")
  .data(data)
 .enter().append("circle")
  .attr("class", "dot")
  .attr("r", 3.5)
  .attr("cx", function(d) { return x(d.time); })
  .attr("cy", function(d) { return y(d.place); })
  .style("fill", function(d) { return color(d.species); });
svg.selectAll(".dodo")
  .data(data)
 .enter().append("text")
  .attr("class", "dodo")
  .attr("x", function(d) { return x(d.time); })
  .attr("y", function(d) { return y(d.place); })
  .attr("dx", ".71em")
  .attr("dy", ".35em")
  .text(function(d) { return d.name;});
相关文章：