Remove line from line graph in d3.js

Question

I have a button that displays a line graph using d3.js. But I want to remove the line from the graph on clicking the same button. I have created a toggle button, but how do i remove the line from the graph ? I have the following function that plots the graph. svg.selectAll("path").remove() is removing the axis and but not the line. function plotGraph(file) { ``` var color = d3.scale.category10(); var svg = d3.select('#mySvg'); svg.selectAll("path").remove(); var line = d3.svg.line().interpolate("basis").x(function(d) { return x(d.date); }).y(function(d) { return y(d.mvalue); }); d3.csv(file,function(error, data) { color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; })); data = data.map(function(d) { return { mvalue : +d.mvalue, date : parseDate(d.date) }; }); x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([ 0, 100 ]); svg.append("path").datum(data).attr("class", "line").attr("d",line); }); ``` }

Accepted Answer

You have a few options to select a specific element you want to remove. If that element is identified by a class, you can do

```
d3.select("path.line").remove();
```

If you want to remove all lines on the graph, you should use

```
d3.selectAll("path.line").remove();
```

If, as in your example, there are several of these elements, you can assign an ID to them and use that to remove it.

```
svg.append("path")
// ...
.attr("id", "id");

// ...

d3.select("#id").remove();
```

Remove line from line graph in d3.js

Solution

Problem