Как избежать пустых элементов 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 верно показывает круг, но, глядя на коде страницы HTML я вижу, что узлы, где hasLabel ложно есть. Есть ли способ избежать этого?

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