javascript - 如何更新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属性，它添加和删除带有子元素的节点，但如何更新子元素内的属性，例如 fill circle的，和"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