[英]Updating the coordinates in d3js for a tree layout
我目前正在使用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);
希望这会有所帮助,但以一般的方式来说,将输入和更新分离(使用更多信息,请参见此处 )可能更容易以这种方式进行编码
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.