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）

更新d3js中的坐标以获得树布局

1 个答案: