d3.js: Làm thế nào để thêm nhãn để phân tán các điểm trên đồ thị

Question

Tôi cố gắng để thêm nhãn cho các điểm phân tán trên biểu đồ này: http://bost.ocks.org/mike/d3/workshop/dot-chart.html

Tôi nghĩ rằng thay đổi mã này một chút sẽ làm việc, nhưng nó đã không 't:

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

Answer 1

Mike Robinson, ví dụ của bạn đã trợ giúp.

Đối với những người đang tự hỏi, đây là những gì tôi đã làm:

tôi loại bỏ:

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

và nói thêm:

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

tôi nối "text" thẻ vào "g" thẻ, trái ngược với việc thêm thẻ "văn bản" vào thẻ "vòng kết nối". (?)

Answer 2

Khi tôi cố gắng giải pháp nút, một số dữ liệu của tôi biến mất, vì vậy tôi chỉ cần thêm một lớp mới gọi là "dodo" mà làm việc cho tôi:

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