d3.js: Wie Etiketten hinzufügen Punkte auf der Grafik streuen

Question

Ich versuche, Etiketten auf die Streupunkte auf diesem Diagramm hinzuzufügen: http://bost.ocks.org/mike/d3/workshop/dot-chart.html

Ich dachte, dass Sie diesen Code ein wenig zu modifizieren funktionieren würde, aber es didn 't:

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

Answer 1

Mike Robinson, Ihr Beispiel half.

Für diejenigen, die sich fragen, hier ist das, was ich getan habe:

I entfernt:

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

und hinzugefügt:

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

hängten I "Text" Tags auf "g" Tags, im Gegensatz zum Anhängen von "Text" -Tags an "Kreis" -Tags. (?)

Answer 2

Wenn ich den Knoten Lösung versuchte, einige meiner Daten verschwunden, so dass ich nur hinzugefügt, um eine neue Klasse „dodo“ genannt, was für mich gearbeitet:

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