我对 D3js
很陌生我有一个像这样的整洁的树形图
const data = {
"name": "tree",
"children": [
{
"name": "A",
"children": [
{
"name": "B",
"children": [
{ "name": "C", "size": 3938 },
]
},
{
"name": "H",
"children": [
{ "name": "D", "size": 3534 },
{ "name": "E", "size": 5731 },
{ "name": "F", "size": 7840 },
]
},
]
}
]
}
const width = 928;
// Compute the tree height; this approach will allow the height of the
// SVG to scale according to the breadth (width) of the tree layout.
const root = d3.hierarchy(data);
const dx = 10;
const dy = width / (root.height + 1);
// Create a tree layout.
const tree = d3.tree().nodeSize([dx, dy]);
// Sort the tree and apply the layout.
root.sort((a, b) => d3.ascending(a.data.name, b.data.name));
tree(root);
// Compute the extent of the tree. Note that x and y are swapped here
// because in the tree layout, x is the breadth, but when displayed, the
// tree extends right rather than down.
let x0 = Infinity;
let x1 = -x0;
root.each(d => {
if (d.x > x1) x1 = d.x;
if (d.x < x0) x0 = d.x;
});
// Compute the adjusted height of the tree.
const height = x1 - x0 + dx * 2;
const svg = d3.select("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-dy / 3, x0 - dx, width, height])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const link = svg.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
link
.selectAll()
.data(root.links())
.join("path")
.attr("d", d3.linkHorizontal()
.x(d => d.y)
.y(d => d.x));
const node = svg.append("g")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.selectAll()
.data(root.descendants())
.join("g")
.attr("transform", d => `translate(${d.y},${d.x})`)
node.append("circle")
.attr("fill", d => d.children ? "#555" : "#999")
.attr("r", 5.5)
node.append("text")
.attr("dy", "0.31em")
.attr("x", d => d.children ? -6 : 6)
.attr("text-anchor", d => d.children ? "end" : "start")
.text(d => d.data.name)
.clone(true).lower()
.attr("stroke", "white");
d3.selectAll("circle").on("contextmenu", (event) => {
this.selectedNode = event.srcElement.__data__.data
});
const connectNodes = (t, f) => {
let to = null, fr = null;
node.each( d => {
if (d.data.name === t) to = d;
if (d.data.name === f) fr = d;
});
if (to && fr){
link.append("path")
.attr("d", "M" + to.y + "," + to.x + "L" + fr.y + "," + fr.x)
.attr("fill", "none")
.attr("stroke", "red");
}
};
connectNodes("B", "D");
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.js"></script>
</head>
<body>
<svg></svg>
</body>
</html>
现在我需要删除
H 和 F 之间的链接 我该怎么做?
更新数据后,需要重新计算树布局并重新绘制树。这涉及使用 d3.hierarchy(data) 重新计算层次结构,使用 tree(root) 应用树布局,然后重新渲染链接和节点。
// Function to remove a link between two nodes
function removeLink(parentName, childName) {
const parentNode = root.descendants().find(d => d.data.name === parentName);
if (parentNode) {
parentNode.data.children = parentNode.data.children.filter(child => child.name !== childName);
updateTree();
}
}
// Function to update and redraw the tree
function updateTree() {
// Recompute the tree layout
tree(root);
// Redraw the links
link.selectAll("path")
.data(root.links())
.join("path")
.attr("d", d3.linkHorizontal().x(d => d.y).y(d => d.x));
// Redraw the nodes
node.data(root.descendants()).join("g")
.attr("transform", d => `translate(${d.y},${d.x})`);
}
// Call the removeLink function to remove the link between H and F
removeLink("H", "F");
removeLink函数找到父节点(“H”),过滤掉子节点(“F”),然后调用updateTree更新树布局并重绘树。 updateTree 函数重新计算布局并相应更新链接和节点。