CODEWITHSUNDEEP
javascripthtmld3.js
void
void

Reputation: 207

Remove line from line graph in d3.js

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

});

}

Upvotes: 9

Views: 19429

Answers (2)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

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

Upvotes: 17

ckersch
ckersch

Reputation: 7687

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.

Upvotes: 2

Related Questions