d3-patterns

# D3.js 可视化模式 本参考提供了常见 d3.js 可视化类型的详细代码模式。 ## 层级可视化 ### 树状图 (Tree diagram) javascript useEffect(() => { if (!data) return; const svg = d3.select(svgRef.current); svg.selectAll("*").remove(); const width = 800; const height = 600; const tree = d3.tree().size([height - 100, width - 200]); const root = d3.hierarchy(data); tree(root); const g = svg.append("g") .attr("transform", "translate(100,50)"); // 连线 g.selectAll("path") .data(root.links()) .join("path") .attr("d", d3.linkHorizontal() .x(d => d.y) .y(d => d.x)) .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-width", 2); // 节点 const node = g.selectAll("g") .data(root.descendants()) .join("g") .attr("transform", d => `translate(${d.y},${d.x})`); node.append("circle") .attr("r", 6) .attr("fill", d => d.children ? "#555" : "#999"); node.append("text") .attr("dy", "0.31em") .attr("x", d => d.children ? -8 : 8) .attr("text-anchor", d => d.children ? "end" : "start") .text(d => d.data.name) .style("font-size", "12px"); }, [data]); ### 矩形树图 (Treemap) javascript useEffect(() => { if (!data) return; const svg = d3.select(svgRef.current); svg.selectAll("*").remove(); const width = 800; const height = 600; const root = d3.hierarchy(data) .sum(d => d.value) .sort((a, b) => b.value - a.value); d3.treemap() .size([width, height]) .padding(2) .round(true)(root); const colourScale = d3.scaleOrdinal(d3.schemeCategory10); const cell = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); cell.append("rect") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) .attr("fill", d => colourScale(d.parent.data.name)) .attr("stroke", "white") .attr("stroke-width", 2); cell.append("text") .attr("x", 4) .attr("y", 16) .text(d => d.data.name) .style("font-size", "12px") .style("fill", "white"); }, [data]); ### 旭日图 (Sunburst diagram) javascript useEffect(() => { if (!data) return; const svg = d3.select(svgRef.current); svg.selectAll("*").remove(); const width = 600; const height = 600; const radius = Math.min(width, height) / 2; const root = d3.hierarchy(data) .sum(d