我想使用D3使用以下数据创建一个列表:
var dataSet = [
{ label: 'a', value: 10},
{ label: 'b', value: 20},
{ label: 'c', value: 30},
{ label: 'd', value: 40}
];
var circle = svg.selectAll('circle')
.data(dataSet)
.enter()
.append('circle')
.attr({
r:function(d){ return d.value },
cx:function(d, i){ return i * 100 + 50 },
cy:50,
fill: 'red'
});
哪个有效。现在过了一段时间,我改变了数据
dataSet[0].value = 40;
dataSet[1].value = 30;
dataSet[2].value = 20;
dataSet[3].value = 10;
我想再次列出清单:
setTimeout(function () {
var circle = svg.selectAll('circle')
.data(dataSet, function (d) {
return d.label;
})
.sort(function (a,b){ return d3.ascending(a.value, b.value);})
.enter()
.append('circle')
.attr({
r:function(d){ return d.value },
cx:function(d, i){ return i * 100 + 50 },
cy:50,
fill: 'red'
});
},1000);
但是,此列表并未真正更新。有任何建议如何解决这个问题?
答案 0 :(得分:1)
您需要清除svg.html('');
中的setTimeout
的 DEMO 强>
答案 1 :(得分:1)
这可以通过调用以下方法删除现有的圆圈来完成:
svg.selectAll('circle').remove()
然后再次使用不同的数据集添加它们。我更新了你的小提琴http://jsfiddle.net/Q5Jag/1183/
希望这有帮助。
这里有一些进入和退出动画http://jsfiddle.net/Q5Jag/1184/
的小提琴答案 2 :(得分:1)
问题是你只处理输入选择,在更新时它将为空 - 你需要处理更新选择:
svg.selectAll('circle')
.data(dataSet, function (d) {
return d.label;
})
.sort(function (a,b){ return d3.ascending(a.value, b.value);})
.transition()
.attr({
r:function(d){ return d.value },
cx:function(d, i){ return i * 100 + 50 },
cy:50,
fill: 'red'
});
更新了小提琴here。有关不同选择的更多信息,请查看this tutorial。