如何更新d3中的子元素？

Question

我想繪製節點（對於力佈局，但在這個問題中，我只留下節點，以最小化代碼），它具有位置，顏色，文本等屬性，並使用g內的多個元素繪製。

我想實現「一般更新模式」，這裏就是我：

var update = function(data) { 
    var nodes = svg.selectAll('g').data(data); 

    var nodeenter = nodes.enter().append('g') 

    // append + update 
    nodes.attr('transform', function(d, i) { 
      return 'translate(' + 
       (radius + i * radius * 2) + ',' + 
       (height/2 + d.height) 
      +')'; 
     }); 

    // append 
    nodeenter.append('circle') 
     .attr('r', radius) 
     .style('fill', function (d) { return d.color; }); 
    nodeenter.append('text') 
     .text(function (d) { return d.text }); 

    // remove 
    nodes.exit().remove(); 
}; 

它更新組transform屬性，它增加了與子元素刪除節點，但我怎麼更新中的屬性子元素，如circle的fill和text的"text"？

這裏的jsfiddle所有的代碼，這說明了這個問題：http://jsfiddle.net/2kqLC/2/

Answer 1

只是要在初始更新選擇一個新的子選擇和編輯它的屬性。勢在必行的

nodes.select('text').text(function (d) { return d.text }); 
nodes.select('circle').style('fill', function (d) { return d.color; }); 

jsfiddle.net/2kqLC/3

Answer 2

方法工作僅僅指剛細，但可以更新，以逃避重複的代碼用於設置屬性：

var update = function(data) { 
    var nodes = svg.selectAll('g').data(data); 

    // append 
    var nodeenter = nodes.enter().append('g'); 
    nodeenter.append('circle').attr('r', radius); 
    nodeenter.append('text'); 

    // append + update 
    nodes.attr('transform', function(d, i) { 
      return 'translate(' + 
       (radius + i * radius * 2) + ',' + 
       (height/2 + d.height) 
      +')'; 
     }); 

    nodes.select('text').text(function (d) { return d.text }); 
    nodes.select('circle').style('fill', function (d) { return d.color; }); 

    // remove 
    nodes.exit().remove(); 
}; 

http://jsfiddle.net/2kqLC/5/