Làm cách nào để tạo các phần tử tùy thuộc vào dữ liệu trong D3?

Question

nhìn sample:

d3.select("body").selectAll("div") 
    .data([4, 8, 15, 16, 23, 42]) 
    .enter().append("div") 
    .text(function(d) { return d; }); 

giúp đỡ không thể không tự hỏi làm thế nào để thêm nhạy cảm với dữ liệu được cung cấp - nói do append and fill text với một số vị nói if d == 8 othervise không nối thêm?

Answer 1

Cách đơn giản nhất là để lọc mảng của bạn trước khi gọi .data(...):

d3.select("body").selectAll("p") 
    .data([4, 8, 15, 16, 23, 42].filter(function(d){ return d < 10; })) 
    .enter().append("div") 
    .text(function(d) { return d; }); 

sẽ tạo ra một div chỉ dành cho 4 và 8.

Ngoài ra, bạn có thể lọc lựa chọn của bạn sau khi ràng buộc mảng của bạn đến các yếu tố trên trang để tạo điều kiện cho trẻ em có điều kiện:

d3.select("body").selectAll("div") 
    .data([4, 8, 15, 16, 23, 42]) 
    .enter().append("div") 
    .text(function(d) { return d; }) 
.filter(function(d){ return d == 8; }).append("span") 
    .text("Equal to 8")