在 D3 树中添加动态节点
Adding Dynamic Node in D3 Tree
我正在学习 d3 js 布局,并且在将节点添加到树布局时遇到困难。
希望在单击父节点后添加动态节点(子节点)的方法。
我当前的实现确实添加了节点,但它没有更新它,而是添加了新的子节点并保留了以前的子节点。
有人可以帮助我了解问题以及解决此问题的正确方法吗?
这是我的代码和我的小提琴(单击根节点):
.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 function
此处的工作代码
相关文章:
- d3基于用户选择动态更新节点
- 如何在动态创建的节点上绑定函数
- 如何在动态 js 中更改一组节点的颜色
- D3.js强制布局:动态添加节点;t随图的其余部分移动
- 如何在Cytoscape.js中为每个节点提供动态edgeLength
- 将json数据动态加载到D3节点中
- 动态地将单击的节点作为加载节点的父节点 - jsTree
- 如何使用onclick javascript动态添加,删除列表中的节点
- 在强制布局 D3.js 中保持节点之间的动态链接距离
- D3.js动态设置节点可见性
- 具有静态节点和动态加载节点的 JsTree
- 如何本地化节点.js应用程序,每个区域设置具有不同的单词位置,混合静态和动态本地化文本
- 节点.js:尝试侦听设置为动态函数的变量时出错
- 动态 dom 节点与 jquery
- 如何在动态树中选择节点
- 分页动态加载的 Webix 树节点
- 目录-动态节点.JS快速服务器
- 在 D3 树中添加动态节点
- cytoscape.js中的动态节点内容(标签)
- 动态节点生成功能