使用D3.js創(chuàng)建復雜、交互式數(shù)據(jù)可視化的專業(yè)指導技能。D3.js擅長將數(shù)據(jù)綁定到DOM元素并應用數(shù)據(jù)驅動的轉換創(chuàng)建自定義、出版質量的可視化。技能概述claude-d3js-skill 技能提供使用D3.js創(chuàng)建復雜、交互式數(shù)據(jù)可視化的指導。D3.js數(shù)據(jù)驅動文檔擅長將數(shù)據(jù)綁定到DOM元素并應用數(shù)據(jù)驅動的轉換以創(chuàng)建具有精確控制每個視覺元素的自定義、出版質量的可視化。這些技術適用于任何JavaScript環(huán)境包括原生JavaScript、React、Vue、Svelte和其他框架。下載地址agentic-awesome-skills/skills/claude-d3js-skill at main · sickn33/agentic-awesome-skills · GitHub主要功能自定義可視化: 創(chuàng)建需要獨特視覺編碼或布局的自定義可視化交互式探索: 實現(xiàn)復雜的平移、縮放或刷選行為的交互式探索網(wǎng)絡/圖形可視化: 力導向布局、樹形圖、層次結構、和弦圖地理可視化: 使用自定義投影的地理可視化平滑過渡: 需要平滑、精心編排的過渡的可視化出版質量圖形: 具有精細樣式控制的出版質量圖形觸發(fā)條件在以下情況下應該使用D3.js:需要獨特視覺編碼或布局的自定義可視化具有復雜平移、縮放或刷選行為的交互式探索網(wǎng)絡/圖形可視化力導向布局、樹形圖、層次結構、和弦圖使用自定義投影的地理可視化需要平滑、精心編排的過渡的可視化具有精細樣式控制的出版質量圖形標準庫中不可用的新穎圖表類型核心工作流程1. 設置D3.jsimport * as d3 from d3;// 或使用CDN版本7.x// script srchttps://d3js.org/d3.v7.min.js/script2. 選擇集成模式模式A: 直接DOM操作推薦用于大多數(shù)情況使用D3選擇DOM元素并以命令式方式操作它們。這適用于任何JavaScript環(huán)境。模式B: 聲明式渲染用于具有模板的框架使用D3進行數(shù)據(jù)計算比例、布局但通過框架渲染元素。3. 構建可視化代碼function drawVisualization(data) {if (!data || data.length 0) return;const svg d3.select(#chart);svg.selectAll(*).remove();// 1. 定義尺寸const width 800;const height 400;const margin { top: 20, right: 30, bottom: 40, left: 50 };// 2. 創(chuàng)建主組const g svg.append(g).attr(transform, translate(${margin.left},${margin.top}));// 3. 創(chuàng)建比例const xScale d3.scaleLinear().domain([0, d3.max(data, d d.x)]).range([0, innerWidth]);// 4. 創(chuàng)建并添加坐標軸// 5. 綁定數(shù)據(jù)并創(chuàng)建視覺元素}常見可視化模式條形圖const xScale d3.scaleBand().domain(data.map(d d.category)).range([0, innerWidth]).padding(0.1);const yScale d3.scaleLinear().domain([0, d3.max(data, d d.value)]).range([innerHeight, 0]);g.selectAll(rect).data(data).join(rect).attr(x, d xScale(d.category)).attr(y, d yScale(d.value)).attr(width, xScale.bandwidth()).attr(height, d innerHeight - yScale(d.value)).attr(fill, steelblue);折線圖const line d3.line().x(d xScale(d.date)).y(d yScale(d.value)).curve(d3.curveMonotoneX);g.append(path).datum(data).attr(fill, none).attr(stroke, steelblue).attr(stroke-width, 2).attr(d, line);散點圖g.selectAll(circle).data(data).join(circle).attr(cx, d xScale(d.x)).attr(cy, d yScale(d.y)).attr(r, d sizeScale(d.size)).attr(fill, d colourScale(d.category)).attr(opacity, 0.7);添加交互性工具提示const tooltip d3.select(body).append(div).attr(class, tooltip).style(position, absolute).style(visibility, hidden);circles.on(mouseover, function(event, d) {tooltip.style(visibility, visible).html(strong${d.label}/strongbr/Value: ${d.value});}).on(mousemove, function(event) {tooltip.style(top, (event.pageY - 10) px).style(left, (event.pageX 10) px);}).on(mouseout, function() {tooltip.style(visibility, hidden);});縮放和平移const zoom d3.zoom().scaleExtent([0.5, 10]).on(zoom, (event) {g.attr(transform, event.transform);});svg.call(zoom);過渡和動畫// 基本過渡circles.transition().duration(750).attr(r, 10);// 鏈式過渡circles.transition().duration(500).attr(fill, orange).transition().duration(500).attr(r, 15);// 交錯過渡circles.transition().delay((d, i) i * 50).duration(500).attr(cy, d yScale(d.value));最佳實踐數(shù)據(jù)準備始終在可視化之前驗證和準備數(shù)據(jù)過濾無效值如果順序重要對數(shù)據(jù)進行排序解析日期性能優(yōu)化對于大型數(shù)據(jù)集1000個元素使用canvas而不是SVG使用四叉樹進行碰撞檢測簡化路徑實現(xiàn)虛擬滾動使用requestAnimationFrame進行自定義動畫可訪問性添加ARIA標簽添加標題和描述確保足夠的顏色對比度為交互元素提供鍵盤導航包含數(shù)據(jù)表替代方案使用限制僅在任務明確匹配上述范圍時使用此技能。不要將輸出作為環(huán)境特定驗證、測試或專家審查的替代品。如果缺少所需的輸入、權限、安全邊界或成功標準請停止并尋求澄清。