2b:null 2c:["$","title",null,{"children":"Zoomable Sunburst Instance | Cu | Observable"}] 31:T1313,chart = { const width = 1000; const height = width; const hierarchyRadius = width / 6.5; const color = d3.scaleOrdinal(d3.schemePastel1); const hierarchy = d3 .hierarchy(data) .sum((d) => d.value || 1) .sort((a, b) => b.value - a.value); const root = d3.partition().size([2 * Math.PI, hierarchy.height + 1])( hierarchy ); root.each((d) => (d.current = d)); const arc = d3 .arc() .startAngle((d) => d.x0) .endAngle((d) => d.x1) .padAngle(0.009) // .padRadius(hierarchyRadius * 1.3) .innerRadius((d) => d.y0 * hierarchyRadius) .outerRadius((d) => d.y1 * hierarchyRadius - 1); const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .style("font", "11px sans-serif") .style("background", "#f8f9fa"); // 添加阴影滤镜 const defs = svg.append("defs"); const filter = defs .append("filter") .attr("id", "shadow") .attr("x", "-50%") .attr("y", "-50%") .attr("width", "200%") .attr("height", "200%"); filter .append("feDropShadow") .attr("dx", 1) .attr("dy", 1) .attr("stdDeviation", 2) .attr("flood-color", "rgba(0,0,0,0.2)"); const path = svg .append("g") .selectAll("path") .data(root.descendants().slice(1)) .join("path") .attr("fill", (d) => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .attr("stroke", "#fff") .attr("stroke-width", 1.5) .attr("fill-opacity", (d) => arcVisible(d.current) ? (d.children ? 0.95 : 0.85) : 0 ) .attr("pointer-events", (d) => (arcVisible(d.current) ? "auto" : "none")) .attr("d", (d) => arc(d.current)); path .filter((d) => d.children) .style("cursor", "pointer") .style("filter", "url(#shadow)") .on("mouseover", function (event, d) { d3.select(this) .transition() .duration(150) .attr("fill-opacity", 1) .attr("stroke-width", 2.5); }) .on("mouseout", function (event, d) { d3.select(this) .transition() .duration(150) .attr("fill-opacity", (d) => arcVisible(d.current) ? (d.children ? 0.95 : 0.85) : 0 ) .attr("stroke-width", 1.5); }) .on("click", clicked); const format = d3.format(",d"); path.append("title").text( (d) => `${d .ancestors() .map((d) => d.data.name) .reverse() .join(" → ")}\n数值: ${format(d.value)}` ); const label = svg .append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .style("user-select", "none") .selectAll("text") .data(root.descendants().slice(1)) .join("text") .attr("dy", "0.35em") .attr("fill", "#333") // 深色文字 .attr("fill-opacity", (d) => +labelVisible(d.current)) .attr("transform", (d) => labelTransform(d.current)) .text((d) => d.data.name); const parent = svg .append("circle") .datum(root) .attr("r", hierarchyRadius) .attr("fill", "none") .attr("pointer-events", "all") .on("click", clicked); function clicked(event, p) { parent.datum(p.parent || root); root.each( (d) => (d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }) ); const t = svg.transition().duration(event.altKey ? 7500 : 750); path .transition(t) .tween("data", (d) => { const i = d3.interpolate(d.current, d.target); return (t) => (d.current = i(t)); }) .filter(function (d) { return +this.getAttribute("fill-opacity") || arcVisible(d.target); }) .attr("fill-opacity", (d) => arcVisible(d.target) ? (d.children ? 0.95 : 0.85) : 0 ) .attr("pointer-events", (d) => (arcVisible(d.target) ? "auto" : "none")) .attrTween("d", (d) => () => arc(d.current)); label .filter(function (d) { return +this.getAttribute("fill-opacity") || labelVisible(d.target); }) .transition(t) .attr("fill-opacity", (d) => +labelVisible(d.target)) .attrTween("transform", (d) => () => labelTransform(d.current)); } function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; } function labelTransform(d) { const x = (((d.x0 + d.x1) / 2) * 180) / Math.PI; const y = ((d.y0 + d.y1) / 2) * hierarchyRadius; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } return svg.node(); }32:[{"id":"e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","href":"https://static.observableusercontent.com/files/e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","name":"flare-2.json","type":"application/octet-stream","lastModified":1760501828944.889,"size":11634}] 2f:{"id":"40dd87e7291d0dd4","slug":null,"title":"Zoomable Sunburst Instance","thumbnail":"80fd4ca9eed025ede20be62c526e681c601f8b2eaa31c39b521d3f7c417a46a5","access_level":"public","create_time":"$D2025-10-15T04:17:08.944Z","update_time":"$D2025-10-15T04:30:49.587Z","view_time":null,"first_public_time":"$D2025-10-15T04:17:08.944Z","fork":{"id":"d260a212049d8ed2","slug":null,"title":"Zoomable Sunburst Instance","owner":{"id":"8feeef125b8270cd","login":"lundychannn","name":"SM6351"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2e5bfe0ce6ce7549","login":"cu3","name":"Cu","avatar_url":"https://avatars-next.observableusercontent.com/9a975e6775bd901b7adc4d6c6bba2701ad77e8686ac470ab38928697c9dd54b6","tier":"starter_2024"},"version":440,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45ee98670b70a40c","login":"lyan2","name":"Lyan","avatar_url":"https://avatars-next.observableusercontent.com/b21004147f9173553f17632b2395e7700828284262248816db713560d2687214","tier":null}],"members":[{"type":"team","id":"2e5bfe0ce6ce7549","login":"cu3","name":"Cu","avatar_url":"https://avatars-next.observableusercontent.com/9a975e6775bd901b7adc4d6c6bba2701ad77e8686ac470ab38928697c9dd54b6","tier":"starter_2024","role":"editor"},{"type":"individual","id":"45ee98670b70a40c","login":"lyan2","name":"Lyan","avatar_url":"https://avatars-next.observableusercontent.com/b21004147f9173553f17632b2395e7700828284262248816db713560d2687214","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Zoomable Sunburst Instance","cells":[{"id":0,"value":"

Zoomable Sunburst Instance

D3 › Gallery

\n\n# Zoomable Sunburst Instance\n\nThis variant of a [sunburst diagram](/@d3/sunburst/2) shows only two layers of the hierarchy at a time. Click a node to zoom in, or the center to zoom out. Compare to an [icicle](/@d3/zoomable-icicle).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"flare-2.json\").json() //not intuitive naming rules (・̮︢⍸・̮︢)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"