javascript - d3.js: グラフ上の散布点にラベルを追加する方法

Question

このグラフの散布点にラベルを追加しようとしています: http://bost.ocks.org/mike/d3/workshop/dot-chart.html

このコードを少し変更するとうまくいくと思いましたが、うまくいきませんでした:

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

Answer 1

マイク・ロビンソン、あなたの例が役に立ちました。

疑問に思っている人のために、私がやったことは次のとおりです。

私は削除しました：

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");

「text」タグを「circle」タグに追加するのではなく、「text」タグを「g」タグに追加しました。

Answer 2

ノード ソリューションを試したところ、データの一部が消えてしまったので (?)、「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;});