d3.js過濾後的髒svg（空標記）

Question

我發現D3.js，我嘗試過濾數據（剛剛放入.append後）。它可以直觀地工作，但如果我檢查生成的SVG，也會生成空標記。

簡單的例子：

var data = d3.range(10); 
    var svg = d3.select("body").append("svg"); 

    var shapes = svg.selectAll(".shapes") 
     .data(data).enter(); 

    shapes.append("circle") 
     .filter(function(d){ return d < 5; }) 
     .attr("cx", function(d, i){ return (i+1) * 25; }) 
     .attr("cy", 10) 
     .attr("r", 10); 

渲染：

<svg> 
<circle cx="25" cy="10" r="10"/> 
<circle cx="50" cy="10" r="10"/> 
<circle cx="75" cy="10" r="10"/> 
<circle cx="100" cy="10" r="10"/> 
<circle cx="125" cy="10" r="10"/> 
<circle/> 
<circle/> 
<circle/> 
<circle/> 
<circle/> 
</svg> 

爲什麼5個圈排除過濾器顯示爲空標籤？ 有沒有辦法在使用過濾器方法後獲得「乾淨」的svg？ 或者，如何過濾數據並通過其他方式獲取乾淨的svg？

Answer 1

您可以在數據過濾器聯接，就像這樣：

var shapes = svg.selectAll(".shapes") 
     .data(data.filter(function(d){ return d < 5; })).enter(); 

shapes.append("circle") 
     .attr("cx", function(d, i){ return (i+1) * 25; }) 
     .attr("cy", 10) 
     .attr("r", 10); 

（假設你不需要任何其他對象的數據 - 顯然取決於手頭的任務）。