使用D3.js创建复杂、交互式数据可视化的专业指导技能。D3.js擅长将数据绑定到DOM元素并应用数据驱动的转换创建自定义、出版质量的可视化。技能概述claude-d3js-skill 技能提供使用D3.js创建复杂、交互式数据可视化的指导。D3.js数据驱动文档擅长将数据绑定到DOM元素并应用数据驱动的转换以创建具有精确控制每个视觉元素的自定义、出版质量的可视化。这些技术适用于任何JavaScript环境包括原生JavaScript、React、Vue、Svelte和其他框架。下载地址agentic-awesome-skills/skills/claude-d3js-skill at main · sickn33/agentic-awesome-skills · GitHub主要功能自定义可视化: 创建需要独特视觉编码或布局的自定义可视化交互式探索: 实现复杂的平移、缩放或刷选行为的交互式探索网络/图形可视化: 力导向布局、树形图、层次结构、和弦图地理可视化: 使用自定义投影的地理可视化平滑过渡: 需要平滑、精心编排的过渡的可视化出版质量图形: 具有精细样式控制的出版质量图形触发条件在以下情况下应该使用D3.js:需要独特视觉编码或布局的自定义可视化具有复杂平移、缩放或刷选行为的交互式探索网络/图形可视化力导向布局、树形图、层次结构、和弦图使用自定义投影的地理可视化需要平滑、精心编排的过渡的可视化具有精细样式控制的出版质量图形标准库中不可用的新颖图表类型核心工作流程1. 设置D3.jsimport * as d3 from d3;// 或使用CDN版本7.x// script srchttps://d3js.org/d3.v7.min.js/script2. 选择集成模式模式A: 直接DOM操作推荐用于大多数情况使用D3选择DOM元素并以命令式方式操作它们。这适用于任何JavaScript环境。模式B: 声明式渲染用于具有模板的框架使用D3进行数据计算比例、布局但通过框架渲染元素。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. 创建主组const g svg.append(g).attr(transform, translate(${margin.left},${margin.top}));// 3. 创建比例const xScale d3.scaleLinear().domain([0, d3.max(data, d d.x)]).range([0, innerWidth]);// 4. 创建并添加坐标轴// 5. 绑定数据并创建视觉元素}常见可视化模式条形图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));最佳实践数据准备始终在可视化之前验证和准备数据过滤无效值如果顺序重要对数据进行排序解析日期性能优化对于大型数据集1000个元素使用canvas而不是SVG使用四叉树进行碰撞检测简化路径实现虚拟滚动使用requestAnimationFrame进行自定义动画可访问性添加ARIA标签添加标题和描述确保足够的颜色对比度为交互元素提供键盘导航包含数据表替代方案使用限制仅在任务明确匹配上述范围时使用此技能。不要将输出作为环境特定验证、测试或专家审查的替代品。如果缺少所需的输入、权限、安全边界或成功标准请停止并寻求澄清。