我正在学习 d3 js 布局,但在向树布局添加节点时遇到困难。
希望有一种在点击父节点后添加动态节点(子节点)的方法。
我当前的实现确实添加了节点,但它没有更新它,而是添加了新的子节点并保留之前的子节点。
有人可以帮助我理解这个问题以及解决这个问题的正确方法吗?
这是我的代码和我的 Fiddle (点击根节点):
HTML
<div id="body">
</div>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
JS
var margin = {top: 100, right: 50, bottom: 100, left: 50},
width = 900 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var tree = d3.layout.tree()
.separation(function(a, b) { return a.children === b.children ? 1 : 1.2; })
.size([width, height]);
var svg = d3.select("body")
.attr("bgcolor", "#fff")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var dataOne = {
"name": "Mike and Marcia",
"children": [
{
"name": "Children",
"children": [
{ "name": "Mikael" }
]
}
]
};
var drawTree = function(source){
var nodes = tree.nodes(source);
var node = svg.selectAll(".node")
.data(nodes)
.enter()
.append("g");
var boxes = node.selectAll('g')
.data(nodes)
.enter()
.append('g')
.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; });
boxes.on("click", function(d,i){
clickOutside(d);
});
};
var clickOutside = function(value){
var newData = {
"name": "Mike and Marcia",
"children": [{
"name": "Children",
"children": [{
"name": "Mikael"
}]
},{
"name": "Pets",
"children": []
}]
};
drawTree(newData);
console.log(value);
}
drawTree(dataOne);
最佳答案
问题在于您正在旧图表上绘制新图表。
这就是为什么您会觉得它向旧父级添加了子级。
所以正确的方法是
- 绘制图表
- 删除所有不需要的节点。
所以第一点
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 函数
工作代码here
关于javascript - 在D3树中添加动态节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34786304/