javascript - d3 Selection.remove() 不删除

Question

我需要删除我的 x 轴。这是我的minimal nonworking example

我的 HTML 如下:

<div class="chart" ng-switch="col.type">
    <svg width="150" height="20">
        <g class="main" transform="translate(5,5)"> ... </g>
        <g class="x axis" transform="translate(5,5)"> ... </g>
    </svg>
</div>

我的 JavaScript(使用 D3)是这样的:

svg.selectAll(".x.axis").remove();

我非常确定 svg 变量已正确选择，因为它在我之前的代码中使用过，没有任何问题。

以下是我尝试过的一些方法:

svg.selectAll("g.x.axis").remove();

svg.selectAll(".x.axis").data([]).exit().remove();

svg.selectAll("g.x.axis").data([]).exit().remove();

svg.selectAll(".x").data([]).exit().remove();

svg.selectAll(".x").remove();

但是他们都没有为我移除 x 轴:(

调试输出:

console.log("SVG data: " + svg );
// output: SVG data: [object SVGGElement] 

console.log("x axis: " + svg.selectAll("g.x.axis") );
// output: x axis:  

Answer 1

试试这个代码:

<强> DEMO

 var svg = d3.select(".chart").select("svg");
    svg.selectAll(".x.axis").remove();