Question

我正在尝试使用D3显示一些数据。我有一个带有键值对的对象数组。

let data = [{k:'kfoo',v:'vfoo'},{k:'kbar',v:'vbar'}];

function doit(somedata){
  let bod = d3.select('body');
  let rows = bod.selectAll('div.row').data(somedata, d=>d.k);
  rows.exit().remove();
  
  let newRows = rows.enter().append('div').classed('row', true);
  newRows.append('span').text(d=>d.k);
  newRows.append('span').text(' ');
  newRows.append('span').text(d=>d.v);
  
  //rows.selectAll('span:first-child').text(d=>d.k);
  rows.selectAll('span:last-child').text(d=>d.v)
}

doit(data);

setTimeout(function(){
  data[0].k = 'kfoo1';
  data[0].v = 'vfoo1';
  doit(data);
}, 3000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

https://jsfiddle.net/dfw0m1ga/1/

为什么当我更改data[0].k中的值时，我希望这会导致d3将0元素解释为新项。相反，它将其解释为更新。为什么？

Answer 1

您修改的数据是绑定的，因此，如果您修改对象，则绑定的对象也会被修改，并且键功能也会匹配。

删除第一个对象并添加一个新对象。这里是硬编码的，但是您可以找到适合您实际应用程序数据的方法。

let data = [{k:'kfoo',v:'vfoo'},{k:'kbar',v:'vbar'}];

function doit(somedata){
  let bod = d3.select('body');
  let rows = bod.selectAll('div.row').data(somedata, d=>d.k);
  rows.exit().remove();
  
  let newRows = rows.enter().append('div').classed('row', true);
  newRows.append('span').text(d=>d.k);
  newRows.append('span').text(' ');
  newRows.append('span').text(d=>d.v);
  
  //rows.selectAll('span:first-child').text(d=>d.k);
  rows.selectAll('span:last-child').text(d=>d.v)
}

doit(data);

setTimeout(function(){
  data = [data[1]];
  data.push( {k:'kfoo1',v:'vfoo1'} );
  doit(data);
}, 3000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

使用按键功能时D3更新与新项目

1 个答案: