Question

85

Remove line from line graph in d3.js

rated 0 times [ 86] [ 1] / answers: 1 / hits: 18706 / 11 Years ago, fri, january 31, 2014, 12:00:00

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



});

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

yaquelina

Add To Favorites

Follow

Total Points: 517

Total Questions: 101

Total Answers: 96

Location: Egypt

Member since Tue, Jul 6, 2021

3 Years ago

answered 11 Years ago agustindejonm · 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();