chart = {
const root = d3.hierarchy(data);
// let height;
root.x0 = dy / 2;
root.y0 = 0;
root.descendants().forEach((d, i) => {
d.id = i;
d._children = d.children;
// if (d.depth && d.data.name.length !== 7) d.children = null;
});
const svg = d3
.create("svg")
.attr("viewBox", [-margin.left, -margin.top, width, dx])
.style("font", "10px sans-serif")
.style("user-select", "none");
const gLink = svg
.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5);
const gNode = svg
.append("g")
.attr("cursor", "pointer")
.attr("pointer-events", "all");
// DRAG STUFF
let selDescendants = null;
let descendantLinks = null;
let otherNodes = null;
let newParent = null;
let oldParent = null;
function dragstarted(event, d) {
const draggedNode = d;
d._x = d.x;
d._y = d.y;
d.linkX = 0;
d.linkY = 0;
const dragOrigin = [d._x, d._y];
const childNames = [];
if (d.children) {
d.descendants().forEach((c) => {
childNames.push(c.data.name);
c.diffX = c.x - dragOrigin[0];
c.diffY = c.y - dragOrigin[1];
});
} else {
childNames.push(draggedNode.data.name);
}
descendantLinks = d3.selectAll("path").filter((d, i) => {
if (d) return childNames.includes(d.source.data.name);
});
selDescendants = d3.selectAll(".node").filter((d, i) => {
if (d) return childNames.includes(d.data.name);
});
oldParent = d3.selectAll(".node").filter((data, i) => {
if (data) return data.data.name === d.parent.data.name;
});
otherNodes = d3
.selectAll(".node")
.filter((d, i) => {
if (d)
return (
!childNames.includes(d.data.name) &&
d.data.name !== draggedNode.data.name
);
})
.select("circle");
d3.select(this)
.raise()
.style("stroke", "orangered")
.style("stroke-width", 1)
.attr("pointer-events", "none");
descendantLinks.raise().style("stroke", "orangered");
selDescendants.raise().style("stroke", "orangered");
otherNodes
.style("stroke-width", "23px")
.style("stroke", "aqua")
.attr("stroke-opacity", 0.2)
.on("mouseenter", (event, d) => {
newParent = d3.select(event.target.parentNode);
newParent.selectAll("circle").style("stroke", "orangered");
})
.on("mouseout", (event, d) => {
newParent = null;
d3.select(event.target).style("stroke", "aqua");
});
}
function dragged(event, d) {
d._x += event.dy;
d._y += event.dx;
d.linkX += event.dy;
d.linkY += event.dx;
if (d.children) {
selDescendants.attr(
"transform",
(c) => `translate(${d._y + c.diffY},${d._x + c.diffX})`
);
descendantLinks.attr(
"transform",
(c) => `translate(${d.linkY},${d.linkX})`
);
}
d3.select(this).attr("transform", (d) => `translate(${d._y},${d._x})`);
}
function dragended(event, d) {
delete d.diffX;
delete d.diffY;
delete d.linkX;
delete d.linkY;
delete d._x;
delete d._y;
if (newParent) {
const newParentD = newParent.data()[0];
const index = d.parent.children.indexOf(d);
d.parent.children.splice(index, 1);
if (d.parent.children.length < 1) d.parent.children = null;
if (newParentD.children !== undefined && newParentD.children !== null) {
newParentD.children.push(d);
} else {
newParentD.children = [d];
newParent.selectAll("text").attr("text-anchor", "end").attr("x", -6);
newParent.selectAll("circle").attr("fill", "#555");
}
delete d.parent;
d.parent = newParentD;
delete d.depth;
d.depth = newParentD.depth + 1;
if (d.children) {
d.eachBefore(
(descendant) => (descendant.depth = descendant.parent.depth + 1)
);
}
const parentLink = d3.selectAll("path").filter((link, i) => {
if (link) return link.target.data.name === d.data.name;
});
parentLink.data()[0].source = newParentD;
descendantLinks.attr("transform", (d) => `translate(${0},${0})`);
if (oldParent.data()[0].children === null) {
oldParent.selectAll("text").attr("text-anchor", "start").attr("x", 6);
oldParent.selectAll("circle").attr("fill", "#999");
}
update(newParent);
} else {
d3.select(this)
.transition()
.attr("transform", (d) => `translate(${d.y},${d.x})`);
descendantLinks
.transition()
.attr("transform", (d) => `translate(${0},${0})`);
selDescendants
.transition()
.attr("transform", (d) => `translate(${d.y},${d.x})`);
}
d3.select(this)
.style("stroke-width", 0)
.style("stroke", null)
.attr("pointer-events", "all");
descendantLinks.style("stroke", null);
selDescendants.style("stroke", null);
otherNodes
.style("stroke", null)
.style("stroke-width", 0)
.attr("stroke-opacity", 1);
descendantLinks = null;
selDescendants = null;
otherNodes = null;
oldParent = null;
}
const drag = d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
function update(source) {
// const duration = d3.event && d3.event.altKey ? 2500 : 250;
const duration = 800;
const nodes = root.descendants().reverse();
const links = root.links();
// Compute the new tree layout.
tree(root);
let left = root;
let right = root;
root.eachBefore((node) => {
if (node.x < left.x) left = node;
if (node.x > right.x) right = node;
});
// const height = right.x - left.x + margin.top + margin.bottom;
// console.log("height", height);
const transition = svg
.transition()
.duration(duration)
// .attr("viewBox", [-margin.left, left.x - margin.top, width, height])
.tween(
"resize",
window.ResizeObserver ? null : () => () => svg.dispatch("toggle")
);
// Update the nodes…
const node = gNode.selectAll("g").data(nodes, (d) => d.id);
// Enter any new nodes at the parent's previous position.
const nodeEnter = node
.enter()
.append("g")
.attr("class", "node")
.style("paint-order", "stroke")
.attr("transform", (d) => `translate(${source.y0},${source.x0})`)
.attr("fill-opacity", 0)
.attr("stroke-opacity", 0)
// .on("click", (event, d) => {
// d.children = d.children ? null : d._children;
// update(d);
// });
.call(drag);
nodeEnter
.append("circle")
.attr("r", 2.5)
.attr("fill", (d) => (d._children ? "#555" : "#999"))
.attr("stroke-width", 1);
nodeEnter
.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-linejoin", "round")
.attr("stroke-width", 3)
.attr("stroke", "white");
// Transition nodes to their new position.
const nodeUpdate = node
.merge(nodeEnter)
.transition(transition)
.attr("transform", (d) => `translate(${d.y},${d.x})`)
.attr("fill-opacity", 1)
.attr("stroke-opacity", 1);
// Transition exiting nodes to the parent's new position.
const nodeExit = node
.exit()
.transition(transition)
.remove()
.attr("transform", (d) => `translate(${source.y},${source.x})`)
.attr("fill-opacity", 0)
.attr("stroke-opacity", 0);
// Update the links…
const link = gLink.selectAll("path").data(links, (d) => d.target.id);
// Enter any new links at the parent's previous position.
const linkEnter = link
.enter()
.append("path")
.attr("d", (d) => {
const o = { x: source.x0, y: source.y0 };
return diagonal({ source: o, target: o });
});
// Transition links to their new position.
link.merge(linkEnter).transition(transition).attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link
.exit()
.transition(transition)
.remove()
.attr("d", (d) => {
const o = { x: source.x, y: source.y };
return diagonal({ source: o, target: o });
});
// Stash the old positions for transition.
root.eachBefore((d) => {
d.x0 = d.x;
d.y0 = d.y;
});
}
update(root);
// return svg.node();
return zoomAndPanSvg(svg.node(), [width, height]);
}
mutable height = 3269
// d3 = require("https://unpkg.com/d3@6/dist/d3.js") // non-minified, for debugging
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
