D3：数据对象中的值已更改但未在表中更新

Question

我使用D3创建了一个表。

当我对基础数据进行更改并要求重绘时，D3不会反映这些更改。我不确定我做错了什么。

Accompanying JS Fiddle

我还没有看到任何显示嵌套数据更新的示例。

＆＃13;

＆＃13;

// data
var arr = [
	{
  'key': 'a',
  'values': [
    {
      'pk': '1',
      'name': 'allan'
    }, {
      'pk': '2',
      'name': 'ada'
    }
   ]
	}, {
  'key': 'b',
  'values': [
    {
      'pk': '3',
      'name': 'barry'
    }, {
      'pk': '4',
      'name': 'bonds'
    }
   ]
	}
];

// build table
var table = function(data){
  var tbody = d3.select('tbody');
  var tr = tbody.selectAll('tr')
    .data(data, function(d) {
      return d.key
    });
  tr.enter()
    .append('tr')
    .insert('td');

  tr.exit().remove();

  var td = tr.select('td');

  var div = td.selectAll('div')
    .data(function(d) {
            return d.values;
          }, function(d) {
            return d.pk;
          }
    );

	div.exit().remove();
  
  var divEnter = div.enter()
                    .append('div')
                    .attr('data-pk', function(d){ 
                      return d.pk; 
                    })
                    .text(function(d){
                      return d.name;
                    });
}

// run the function
table(arr);

// update the data and run the function
function updateTable(){
	var bgroup = arr[1].values;
  bgroup[0]['name'] = 'lamar';
	console.log(arr);
  
  table(arr);
}

// assign to update click
$('#update').on('click', function(){
	updateTable();
});

＆＃13;

table td{
  border: 1px solid #f00;
}
table td div{
  border: 1px dotted #0f0;
  margin: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<table>
  <tbody>
  </tbody>
</table>

<br/>

<a id='update' href='#'>Update</a>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您只在输入选择中指定.text：

div.enter()
  .append('div')
  .attr('data-pk', function(d){ 
    return d.pk; 
  })
  .text(function(d){
    return d.name;
  });

您想要进行update选择：

// new things entering
div.enter()
  .append('div')
  .attr('data-pk', function(d){ 
    return d.pk; 
  });

// everything updating
div.text(function(d){
  return d.name;
});

＆＃13;

＆＃13;

// data
var arr = [
	{
  'key': 'a',
  'values': [
    {
      'pk': '1',
      'name': 'allan'
    }, {
      'pk': '2',
      'name': 'ada'
    }
   ]
	}, {
  'key': 'b',
  'values': [
    {
      'pk': '3',
      'name': 'barry'
    }, {
      'pk': '4',
      'name': 'bonds'
    }
   ]
	}
];

// build table
var table = function(data){
  var tbody = d3.select('tbody');
  var tr = tbody.selectAll('tr')
    .data(data, function(d) {
      return d.key
    });
  tr.enter()
    .append('tr')
    .insert('td');

  tr.exit().remove();

  var td = tr.select('td');

  var div = td.selectAll('div')
    .data(function(d) {
            return d.values;
          }, function(d) {
            return d.pk;
          }
    );

	div.exit().remove();
  
  var divEnter = div.enter()
                    .append('div')
                    .attr('data-pk', function(d){ 
                      return d.pk; 
                    });
  
  div.text(function(d){
     return d.name;
  });
}

// run the function
table(arr);

// update the data and run the function
function updateTable(){
	var bgroup = arr[1].values;
  bgroup[0]['name'] = 'lamar';
	console.log(arr);
  
  table(arr);
}

// assign to update click
$('#update').on('click', function(){
	updateTable();
});

＆＃13;

table td{
  border: 1px solid #f00;
}
table td div{
  border: 1px dotted #0f0;
  margin: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<table>
  <tbody>
  </tbody>
</table>

<br/>

<a id='update' href='#'>Update</a>

＆＃13;

＆＃13;

＆＃13;