我有一个按钮,使用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); });
}
您有几个选项可以选择要删除的特定元素.如果该元素由类标识,则可以执行此操作
d3.select("path.line").remove();
如果要删除图表上的所有行,则应使用
d3.selectAll("path.line").remove();
如果在您的示例中有多个这些元素,则可以为它们分配ID并使用它来删除它.
svg.append("path") // ... .attr("id", "id"); // ... d3.select("#id").remove();