chart = {
replay;
const nodes = pack().leaves();
const links = populateLinks();
let zones = d3.rollup(nodes, zone, d => d.data.group);
const simulation = d3.forceSimulation(nodes)
.force("x", d3.forceX(width / 2).strength(0.01))
.force("y", d3.forceY(height / 2).strength(0.03))
.force("links", d3.forceLink(links).strength(0.1))
.force("cluster", forceCluster())
.force("collide", forceCollide());
const svg = d3.select(DOM.svg(width, height));
const area = svg.append("g")
.selectAll("rect")
.data(pack().children)
.join("rect")
.attr("x", d => d.x)
.attr("y", d => d.y)
.attr("width", d=> (d.value + 1) * MAGNIFIER)
.attr("height", d => (d.value + 1) * MAGNIFIER)
.attr("rx", 6)
.attr("fill", d => color(d.data.children[0].group))
.attr("opacity", 0.3)
const link = svg.append("g")
.selectAll("line")
.data(links)
.join("path")
.attr("d", d => `M ${d.source.x + (d.source.value +1) * (MAGNIFIER/2)} ${d.source.y + (d.source.value +1) * (MAGNIFIER/2)} H ${d.target.x + (d.target.value +1) * (MAGNIFIER/2)} V ${d.target.y + (d.target.value +1) * (MAGNIFIER/2)}`)
.attr("y2", d => d.target.y + (d.target.value +1) * (MAGNIFIER/2)) */
.attr("stroke", '#999')
.attr("fill", 'none')
.attr("stroke-width", 2);
const node = svg.append("g")
.selectAll("rect")
.data(nodes)
.join("rect")
.attr("x", d => d.x)
.attr("y", d => d.y)
.attr("width", d=> (d.value +1) * MAGNIFIER)
.attr("height", d => (d.value +1) * MAGNIFIER)
.attr("rx", d => d.value)
.attr("fill", d => color(d.data.group))
node.transition()
.delay((d, i) => Math.random() * 500)
.duration(750)
.attrTween("r", d => {
const i = d3.interpolate(0, d.r);
return t => d.r = i(t);
});
simulation.on("tick", () => {
zones = d3.rollup(nodes, zone, d => d.data.group);
area
.attr("x", d => {
const {x1: x} = zones.get(d.data.children[0].group)
return x - 5;
})
.attr("y", d => {
const {y1: y} = zones.get(d.data.children[0].group)
return y - 5;
})
.attr("width", d => {
const {x1, x2} = zones.get(d.data.children[0].group)
return 10 + x2 - x1;
})
.attr("height", d => {
const {y1, y2} = zones.get(d.data.children[0].group)
return 10 + y2 - y1;
});
node
.attr("x", d => d.x)
.attr("y", d => d.y);
link
.attr("d", d => `M ${d.source.x + (d.source.value +1) * (MAGNIFIER/2)} ${d.source.y + (d.source.value +1) * (MAGNIFIER/2)} H ${d.target.x + (d.target.value +1) * (MAGNIFIER/2)} V ${d.target.y + (d.target.value +1) * (MAGNIFIER/2)}`);
});
invalidation.then(() => simulation.stop());
return svg.node();
}