如何根據D3中的數據創建元素？

Question

看着sample：

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

不能幫助，但不知道如何使追加提供的數據敏感 - 說do append and fill text一些斷言說if d == 8 othervise不追加？

Answer 1

最簡單的方法是調用.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; }); 

僅4和8

或者創建一個div，您可以將陣列結合的元素篩選後您的選擇在頁面上有條件地創建子元素：

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