D3：不更新DOM

更新的数据集，我想创建使用D3使用下面的数据列表：D3：不更新DOM

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);

DEMO

然而，这个名单是不是真的更新。任何建议如何解决这个问题？

来源

2015-07-03 Jeanluca Scaljeri

的问题是，你正在处理只有输入选择，这将是空的更新 - 你需要处理更新的选择：

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。

来源

2015-07-03 17:12:40

你的小提琴似乎不工作，所以我已经修复它[这里]（http://jsfiddle.net/Q5Jag/1193/）Thnx –

@JeanlucaScaljeri我已经离开'.sort（）'，因为这就是你原来的小提琴。虽然没有它可能会更有意义:) –

需要通过调用来清除svg.html('');在setTimeout
DEMO

来源

2015-07-03 12:15:20 ozil

没有真正的需要清除整个svg，特别是如果有任何其他项目不需要随时间改变。 –

这可以通过首先删除现有的社交圈中完成：

svg.selectAll('circle').remove()

，随后通过不同的数据再次加入他们去组。我更新了你的小提琴http://jsfiddle.net/Q5Jag/1183/

希望这会有所帮助。

这里是相同捣鼓一些进入和退出动画http://jsfiddle.net/Q5Jag/1184/

来源

2015-07-03 12:15:44

不错。但有什么方法可以使用某种动画（'transition（）'）更改列表？ –

检查此更新的小提琴...授予它不是很干净，可以改善吨... http://jsfiddle.net/Q5Jag/1184/ –

D3：不更新DOM

回答

相关问题