我有一个使用 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();
如果你想删除图表上的所有线条,你应该使用
d3.selectAll("path.line").remove();
如果在您的示例中有几个这样的元素,您可以为它们分配一个 ID 并使用它来删除它。
svg.append("path")
// ...
.attr("id", "id");
// ...
d3.select("#id").remove();
关于javascript - 从 d3.js 中的线图中删除线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21490020/