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

});

}

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

});

}

• javascript
• html
• d3.js

• Have you tried d3.select("path.line").remove()? – Lars Kotthoff Commented Jan 31, 2014 at 21:07
• YEs, that works. but I have multiple lines on my graph. Can I remove only a selected one. Is there a way to give each line an id ? – void Commented Jan 31, 2014 at 21:41
• Yes, .attr("id", "something"). This can also be set through a function. – Lars Kotthoff Commented Jan 31, 2014 at 21:44
• d3.select("path.line) is removing all lines on the graph. i just need to remove the specific one. .attr() function cannot be added to line, but it is added to the svg element. For example : svg.append("path").datum(data).attr("class", "line").attr("d",line).attr("id","lineId"); then if I want to remove this line with id as lineId. how shall i do it ? – void Commented Jan 31, 2014 at 21:50
• It looks like you're adding only one path and d3.select("path.line").remove() will only remove a single path. Do you want to remove part of a path? – Lars Kotthoff Commented Jan 31, 2014 at 21:52

2 Answers 2

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

You can store the line in a variable and then use that as a handle to remove it later.

In d3, the .append operator returns the appended child, so to do this, all you need to do is this:

var myLine;

function(appendLine){
    ...
    myLine = svg.append("path").datum(data)...
    ...
}

function(removeLine){
    myLine.remove()
}

Use appendLine when you want to create the line and removeLine to remove it. With this method, you can have a variable for each line you want to control, or else use variable scoping to not have to worry about it. It depends on what the rest of your code looks like.

Alternately, if you have a line with an ID that you want to remove, d3.select('#myId').remove() should work.