如何避免代码中的空DOM元素？

Question

如何避免在SVG代码中创建空元素？ 在使用d3绘制的图形中，我希望只有特定节点为圆形而其他节点只有文本。

    svg.append("circle").filter(function(d) { return d.hasLabel; })
    .style("fill", "white")
    .attr("r", 8)
    .attr("cx", function(d) { return xScale(d.x) })
    .attr("cy", function(d) { return yScale(d.y) });

它以某种方式工作，只有hasLabel为true的节点显示一个圆圈，但是查看HTML页面源代码我看到hasLabel为false的节点有。有没有办法避免这种情况？

Answer 1

只需将append移到filter之后，就像这样......

svg.filter(function(d) { return d.hasLabel; })
    .append("circle") 
    .style("fill", "white")
    .attr("r", 8)
    .attr("cx", function(d) { return xScale(d.x) })
    .attr("cy", function(d) { return yScale(d.y) });