更新d3js中的树布局坐标

Coxer 发表于 Dev

考克斯

我目前正在使用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

巴纳贝·蒙诺特

我会将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);