Question

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

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

});

}

Answer 1

您有几个选项可以选择要删除的特定元素。如果该元素由类标识，则可以执行

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

如果要删除图表上的所有行，则应使用

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

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

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

// ...

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

Answer 2

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

在d3中，.append运算符返回附加的子项，因此，您需要做的就是：

var myLine;

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

function(removeLine){
    myLine.remove()
}

如果要创建该行，请使用appendLine，然后使用removeLine删除该行。使用此方法，您可以为要控制的每一行都有一个变量，或者使用变量作用域来不必担心它。这取决于代码的其余部分。

或者，如果您要删除包含要移除的ID的行，d3.select('#myId').remove()应该有效。

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

2 个答案: