chart = {
const root = pack(data);
const svg = d3.select(DOM.svg(width, height))
.style("font", "10px sans-serif")
.style("width", "100%")
.style("height", "auto")
.attr("text-anchor", "middle");
const node = svg.selectAll("g")
.data(root.descendants())
.join("g")
.attr("transform", d => `translate(${d.x + 1},${d.y + 1})`)
.each(function(d) { d.node = this; })
.on("mouseover", hovered(true))
.on("mouseout", hovered(false));
node.append("circle")
.attr("r", d => d.r)
.attr("fill", d => d.children ? "none" : "#ddd")
.attr("stroke", d => d.height === 1 ? "#ccc" : "none")
.attr("pointer-events", "all");
const leaf = node.filter(d => !d.children && d.data.name);
leaf.select("circle")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id);
leaf.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.leafUid.href);
leaf.append("text")
.style("font-size", d => `${Math.sqrt(d.r) * 2}px`)
.attr("clip-path", d => d.clipUid)
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`)
.text(d => d);
node.append("title")
.text(d => `${d.data.name || "N/A"}${d.children ? "" : `
${d.parent.data.name}`}
${format(d.value)}`);
function hovered(hover) {
return d => d3.selectAll(d.ancestors().map(d => d.node))
.select("circle")
.attr("stroke", hover ? "black" : d => d.height === 1 ? "#ccc" : "none");
}
return svg.node();
}