CODEWITHSUNDEEP
javascriptsvgd3.js
CherryQu
CherryQu

Reputation: 3393

d3 selection.remove() doesn't remove

I need to remove my x axis. Here's my minimal nonworking example

My HTML is as follows:

<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 (using D3) is like this:

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

I'm pretty sure that the svg variable is correctly selected because it was used in my previous code without problem.

Here are a couple of things I've tried:

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

But none of them remove the x axis for me :(

Debugging output:

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

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

Upvotes: 0

Views: 4060

Answers (2)

Saravana Kumar
Saravana Kumar

Reputation: 836

You have missed quotes for class name in chart. Check this out here

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

Upvotes: 1

Manoj
Manoj

Reputation: 1890

Try this code:

DEMO

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

Upvotes: 2

Related Questions