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

（假设你不需要任何其他对象的数据 - 显然取决于手头的任务）。