从 d3.js 中的折线图中删除线答案

【问题标题】：Remove line from line graph in d3.js从 d3.js 中的折线图中删除线
【发布时间】：2014-01-31 21:05:39
【问题描述】：

我有一个使用 d3.js 显示折线图的按钮。但是我想在单击同一按钮时从图中删除该线。我创建了一个切换按钮，但是如何从图表中删除线？我有以下绘制图表的函数。 svg.selectAll("path").remove() 正在删除轴而不是线。

函数 plotGraph(文件) {

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

});

}

【问题讨论】：

你试过d3.select("path.line").remove()吗？
是的，这行得通。但我的图表上有多条线。我可以只删除一个选定的。有没有办法给每一行一个id？
是的，.attr("id", "something")。这也可以通过函数来设置。
d3.select("path.line) 正在删除图形上的所有线。我只需要删除特定的。.attr() 函数不能添加到线，但它被添加到svg 元素。例如：svg.append("path").datum(data).attr("class", "line").attr("d",line).attr("id","lineId" ); 那么如果我想删除这条 id 为 lineId 的行，我该怎么做呢？
看起来您只添加了一个路径，d3.select("path.line").remove() 只会删除一个路径。是否要删除路径的一部分？

标签： javascript html d3.js

【解决方案1】：

您有几个选项可以选择要删除的特定元素。如果该元素由一个类标识，您可以这样做

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

如果你想删除图表上的所有线，你应该使用

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

如果像您的示例中那样，有多个这样的元素，您可以为它们分配一个 ID 并使用它来删除它。

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

// ...

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

【讨论】：

【解决方案2】：

您可以将该行存储在一个变量中，然后将其用作句柄以稍后将其删除。

在 d3 中，.append 运算符返回附加的孩子，所以要做到这一点，你需要做的就是：

var myLine;

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

function(removeLine){
    myLine.remove()
}

当您想要创建该行时使用appendLine 并使用removeLine 删除它。使用这种方法，您可以为要控制的每一行设置一个变量，或者使用变量范围来不必担心它。这取决于您的代码的其余部分是什么样的。

或者，如果您想要删除带有 ID 的行，d3.select('#myId').remove() 应该可以工作。

【讨论】：