d3j : 移除一个数据集

Question

我想在未选中复选框时删除曲线。我试过了没有成功：

function drawdata(fileno,draw){
    var name="circle"+fileno;
    if (draw) {
        console.log("Drawing file "+fileno+ " ("+files[fileno]+")");
        svg.selectAll(name) .data(datasets[fileno]) .enter() .append("circle")
        .attr('cx',function(a){ return xscales[xval](a[xval]); })
        .attr('cy',function(a){ return yscales[yval](a[yval]); })
        .attr('r',3)
        .style("opacity", 1)
        ;
    } else {
        console.log("removing file "+fileno);
        svg.selectAll(name).data(datasets[fileno]).exit().remove();
    }
}

第一部分运行良好（即，如果我选中一个复选框，文件就会被绘制）但是当我取消选中它时，它不会从 svg 中删除。我想我不太了解出口。有人可以指出什么是错的吗？谢谢

示例 jsfiddle 代码： http://jsfiddle.net/datavis/530h1qLw/11/#&togetherjs=Rkz5QyDgJm

Answer 1

更新：

加上 fiddle，很容易看出发生了什么。当您执行 svg.selectAll(name) 时，它会返回一个空选择。这是因为没有circleN的元素。 circleN 不是有效的 DOM 元素，其中 none 无论如何都存在，因此选择将失败。

如果您对 cds 函数进行以下更改，您会发现您的代码现在可以运行了：

function cds(el) {
    name = "circle" + el.id;
    if (el.checked) {
        svg.selectAll(name)
            .data(dataset[el.id])
          .enter().append("circle")
            .attr('cx', function (a) { return xscale(a[0]); })
            .attr('cy', function (a) { return yscale(a[1]); })
            .attr('r', 3)
            .attr('class', name)        
            .style("opacity", 1);
    } else {
        svg.selectAll("circle." + name).remove();
    }
}

这个函数有两个注意事项的变化：

.attr('class', name) 被添加到创建新 DOM 元素的代码中。这将在圆圈中添加一个 class，以便在删除它们时更容易选择。
将删除它们的行更新为 svg.selectAll("circle." + name).remove();，这将在您取消选中单选框时删除圆圈。

d3j : 移除一个数据集

d3j : Remove a data set

javascript

d3.js