在 d3js 中更新树形布局的坐标

Question

我目前正在使用 d3.layout.tree() 来计算我的数据的位置。

    var tree = d3.layout.tree()
        .sort(null)
        .size([size.height, size.width - maxLabelLength * options.fontSize])
        .children(function(d)
        {
            return (!d.contents || d.contents.length === 0) ? null : d.contents;
        });

最初我像这样计算和添加我的节点：

var nodes = tree.nodes(treeData);
var nodeGroup = layoutRoot.selectAll("g.node")
    .data(nodes, function (d) { return d.name })
    .enter()
    .append("svg:g")
    .attr("class", "node")
    .attr("transform", function(d)
        {
            return "translate(" + d.y + "," + d.x + ")";
        });
nodeGroup.append("svg:circle")
    .attr("class", "node-dot")
    .attr("r", options.nodeRadius);

现在我向 treeData 和 layoutRoot 添加一个新节点：

var grp = layoutRoot.selectAll("g.node")
    .data(nodes, function (d) { return d.name })
    .enter()
    .append('svg:g')
    .attr("transform", function (d)
    {
        return "translate(" + d.y + "," + d.x + ")";
    })

grp.append("svg:circle")
    .attr("class", "node-dot")
    .attr("r", options.nodeRadius)

现在的问题是，已经存在于 rootLayout 中的新计算节点在添加新节点后具有不同的 x,y 坐标。但它们不在 enter() 或 exit() 选择范围内，因此不会在其正确位置重绘。这应该如何处理，即。除了坐标没有改变的节点的位置应该如何更新/刷新？

我是 d3js 的菜鸟。所以不要太苛刻：D

Answer 1

我会将enter() 选择与这样的节点更新分开：

var nodeGroup = layoutRoot.selectAll("g.node")
.data(nodes, function (d) { return d.name });

// Enter selection
nodeGroup.enter()
.append("svg:g")
.attr("class", "node")

// Update
nodeGroup.attr("transform", function(d) {
    return "translate(" + d.y + "," + d.x + ")";
});

var nodeDots = layoutRoot.selectAll("g.node-dot")
.data(nodes, function (d) { return d.name });

// Enter
nodeDots.enter()
.append("circle")
.attr("class", "node-dot")

// Update
nodeDots.attr("r", options.nodeRadius);

希望这会有所帮助，但总的来说，这样编码可能更容易，将输入和更新分开（有关更多信息，请参阅here）