D3：データオブジェクトの値が変更されましたが、テーブル内で更新されません

Question

D3を使用してテーブルを作成しました。

基礎となるデータを変更して再描画を要求すると、D3には変更が反映されません。私は何が間違っているのか分かりません。

Accompanying JS Fiddle

私は、ネストされたデータで更新を示して任意の例に遭遇していません。

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

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

 
\t 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(){ 
 
\t var bgroup = arr[1].values; 
 
    bgroup[0]['name'] = 'lamar'; 
 
\t console.log(arr); 
 
    
 
    table(arr); 
 
} 
 

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

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

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

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

---

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

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

 
\t 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(){ 
 
\t var bgroup = arr[1].values; 
 
    bgroup[0]['name'] = 'lamar'; 
 
\t console.log(arr); 
 
    
 
    table(arr); 
 
} 
 

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

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

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