Javascript 在D3树中添加动态节点
我正在学习D3JS布局,在向树布局添加节点时遇到困难 希望在单击父节点后添加动态节点(子节点) 我当前的实现确实添加了节点,但它没有更新节点,而是添加了新的子节点,并保留了以前的子节点 有人能帮我理解这个问题和正确的解决方法吗 以下是我的代码和我的(单击根节点): HTMLJavascript 在D3树中添加动态节点,javascript,d3.js,Javascript,D3.js,我正在学习D3JS布局,在向树布局添加节点时遇到困难 希望在单击父节点后添加动态节点(子节点) 我当前的实现确实添加了节点,但它没有更新节点,而是添加了新的子节点,并保留了以前的子节点 有人能帮我理解这个问题和正确的解决方法吗 以下是我的代码和我的(单击根节点): HTML 问题是您正在旧图形上绘制新图形 这就是为什么你会有这样的印象,那就是把孩子添加到老父母的身上 因此,正确的方法是 画图表 删除所有不需要的节点 So第1点 var nodedata = svg.selectAll(".no
问题是您正在旧图形上绘制新图形 这就是为什么你会有这样的印象,那就是把孩子添加到老父母的身上 因此,正确的方法是
var nodedata = svg.selectAll(".node")
.data(nodes, function(d){ /* function which return the Unique id of each node */ return d.name;})
//make all the nodes.
nodedata.enter().append('g')
.attr("class", "node")
.append('rect')
.attr("width", 50)
.attr("height", 40)
.attr("fill", "tan")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y + 50; })
.on("click", function(d,i){
clickOutside(d);
});
第二点
var nodedata = svg.selectAll(".node")
.data(nodes, function(d){ /* function which return the Unique id of each node */ return d.name;})
//make all the nodes.
nodedata.enter().append('g')
.attr("class", "node")
.append('rect')
.attr("width", 50)
.attr("height", 40)
.attr("fill", "tan")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y + 50; })
.on("click", function(d,i){
clickOutside(d);
});
删除第一组传递的数据与第二组传递的数据相交的所有节点
nodedata.exit().remove();
最后一点将子项添加到父项中
您可以更改JSON
var dataOne = {
"name": "Mike and Marcia",
"children": [
{
"name": "Children",
"children": [
{ "name": "Mikael" }
]
}
]
};
添加任何JSON结构,并将其传递给drawTree函数
工作代码非常感谢您对@Cyril的简短而全面的解释。这正是我想要它工作的方式。我有一个后续问题来进一步理解d3的概念。我可以直接问你这个问题吗?
var dataOne = {
"name": "Mike and Marcia",
"children": [
{
"name": "Children",
"children": [
{ "name": "Mikael" }
]
}
]
};