d3j :删除数据集
d3j : Remove a data set
我想在取消选中复选框时删除曲线。我试过这个没有成功:
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
更新:
随着小提琴的加入,很容易看到发生了什么。 当您执行svg.selectAll(name)
时,它将返回一个空选择。 原因是因为没有circleN
元素。 circleN
不是有效的 DOM 元素,并且它们都不存在,因此选择将失败。
如果对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 元素的代码中。 这将向圆圈添加一个类,使选择更容易删除它们。 - 将删除圆圈的行更新为
svg.selectAll("circle." + name).remove();
当您取消选中单选框时将删除圆圈。
相关文章:
- React中的数据集表示
- 使用相同的数据集绘制各种符号
- 多维数据集网格未在指定的分区中绘制
- chart.js 2.0为数据集添加了新属性
- Kendo网格中数据集的最高值
- 具有大型数据集的组件仅在 IE11/Edge 上运行缓慢
- 具有关联数组数据集的D3.js表
- javascript中网络图表的大型数据集
- 具有多个数据集的分组散点图D3
- 停止JSON.parse()从JSON字符串数据中删除尾随零
- 如何在web上动态可视化数据集
- Javascript D3如何从CSV访问和操作数据集
- Chart.js2.X中的条形值-数据集元数据未定义
- 访问HTML数据集
- D3.js如何只创建一个绑定到多个数据项的数据集的元素
- d3j :删除数据集
- 如何删除多维数据集.js实例的一天之后的事件
- 如何使用HTML数据集属性删除data-*属性
- 检查数据集是否被更改(添加/编辑,删除记录)的最佳解决方案是什么?
- 如何在不影响图表的情况下删除数据集的按钮标签?