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> 

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

Но ни один из них не снимает ось х для меня :(

Отладочный вывод:

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

Answer 2

Вы пропустили кавычки для названия класса в диаграмме. Проверьте это here

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