使用D3.js創(chuàng)建復(fù)雜、交互式數(shù)據(jù)可視化的專業(yè)指導(dǎo)技能。D3.js擅長將數(shù)據(jù)綁定到DOM元素并應(yīng)用數(shù)據(jù)驅(qū)動的轉(zhuǎn)換創(chuàng)建自定義、出版質(zhì)量的可視化。技能概述claude-d3js-skill 技能提供使用D3.js創(chuàng)建復(fù)雜、交互式數(shù)據(jù)可視化的指導(dǎo)。D3.js數(shù)據(jù)驅(qū)動文檔擅長將數(shù)據(jù)綁定到DOM元素并應(yīng)用數(shù)據(jù)驅(qū)動的轉(zhuǎn)換以創(chuàng)建具有精確控制每個(gè)視覺元素的自定義、出版質(zhì)量的可視化。這些技術(shù)適用于任何JavaScript環(huán)境包括原生JavaScript、React、Vue、Svelte和其他框架。下載地址agentic-awesome-skills/skills/claude-d3js-skill at main · sickn33/agentic-awesome-skills · GitHub主要功能自定義可視化: 創(chuàng)建需要獨(dú)特視覺編碼或布局的自定義可視化交互式探索: 實(shí)現(xiàn)復(fù)雜的平移、縮放或刷選行為的交互式探索網(wǎng)絡(luò)/圖形可視化: 力導(dǎo)向布局、樹形圖、層次結(jié)構(gòu)、和弦圖地理可視化: 使用自定義投影的地理可視化平滑過渡: 需要平滑、精心編排的過渡的可視化出版質(zhì)量圖形: 具有精細(xì)樣式控制的出版質(zhì)量圖形觸發(fā)條件在以下情況下應(yīng)該使用D3.js:需要獨(dú)特視覺編碼或布局的自定義可視化具有復(fù)雜平移、縮放或刷選行為的交互式探索網(wǎng)絡(luò)/圖形可視化力導(dǎo)向布局、樹形圖、層次結(jié)構(gòu)、和弦圖使用自定義投影的地理可視化需要平滑、精心編排的過渡的可視化具有精細(xì)樣式控制的出版質(zhì)量圖形標(biāo)準(zhǔn)庫中不可用的新穎圖表類型核心工作流程1. 設(shè)置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進(jìn)行數(shù)據(jù)計(jì)算比例、布局但通過框架渲染元素。3. 構(gòu)建可視化代碼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)建并添加坐標(biāo)軸// 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);散點(diǎn)圖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);// 鏈?zhǔn)竭^渡circles.transition().duration(500).attr(fill, orange).transition().duration(500).attr(r, 15);// 交錯(cuò)過渡circles.transition().delay((d, i) i * 50).duration(500).attr(cy, d yScale(d.value));最佳實(shí)踐數(shù)據(jù)準(zhǔn)備始終在可視化之前驗(yàn)證和準(zhǔn)備數(shù)據(jù)過濾無效值如果順序重要對數(shù)據(jù)進(jìn)行排序解析日期性能優(yōu)化對于大型數(shù)據(jù)集1000個(gè)元素使用canvas而不是SVG使用四叉樹進(jìn)行碰撞檢測簡化路徑實(shí)現(xiàn)虛擬滾動使用requestAnimationFrame進(jìn)行自定義動畫可訪問性添加ARIA標(biāo)簽添加標(biāo)題和描述確保足夠的顏色對比度為交互元素提供鍵盤導(dǎo)航包含數(shù)據(jù)表替代方案使用限制僅在任務(wù)明確匹配上述范圍時(shí)使用此技能。不要將輸出作為環(huán)境特定驗(yàn)證、測試或?qū)＜覍彶榈奶娲贰Ｈ绻鄙偎璧妮斎?、?quán)限、安全邊界或成功標(biāo)準(zhǔn)請停止并尋求澄清。