0

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

4

1 回答 1

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);

希望这会有所帮助，但总的来说，以这种方式编写代码可能更容易，将输入和更新分开（有关更多信息，请参见此处）

于 2013-08-08T10:17:04.067 回答