d3.js: come aggiungere etichette per disperdere i punti sul grafico

Question

che sto cercando di aggiungere etichette ai punti di dispersione su questo grafico: http://bost.ocks.org/mike/d3/workshop/dot-chart.html

ho pensato che modifica il codice un po 'avrebbe funzionato, ma didn 't:

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

Answer 1

Mike Robinson, il tuo esempio ha aiutato.

Per coloro che si stanno chiedendo, ecco quello che ho fatto:

ho rimosso:

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

e ha aggiunto:

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

ho allegato "testo" tag sui "g" tag, al contrario di aggiungere tag "testo" ai tag "circle". (?)

Answer 2

Quando ho provato la soluzione del nodo, alcuni dei miei dati scomparso, quindi ho solo aggiunto una nuova classe chiamata "dodo", che ha lavorato per me:

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