本技能用于使用 d3.js（Data-Driven Documents）构建精细、可定制的交互式数据可视化。其核心机制是把数据绑定到 DOM 元素，并对这些元素施加数据驱动的变换，从而产出可完全自定义的视觉结果。
用途 适合以下场景：需要独特视觉编码或布局的自定义图表；带平移、缩放或刷选交互的可视化；网络与图形可视化（力导向、树、层级、和弦图）；使用自定义投影的地理可视化；流畅且编排化的过渡与动画；标准库（Recharts、Chart.js 等）中不具备的新型图表类型；以及对 SVG 样式与无障碍控制的精细需求。资料也指出替代方案：3D 可视化使用 Three.js；简单的标准图表且定制需求很少时使用 Chart.js 或 Recharts。
主要能力 资料给出了多种图表模式的实现示例：条形图使用 scaleBand 与 scaleLinear；折线图使用 d3.line() 与 curveMonotoneX；散点图结合尺寸与颜色比例尺；饼图/环形图使用 d3.pie() 与 d3.arc()；力导向网络图使用 d3.forceSimulation，配合 forceLink、forceManyBody、forceCenter 与拖拽行为；热力图使用 scaleBand 与 scaleSequential（interpolateYlOrRd）。交互方面包含工具提示（tooltip）、缩放与平移（d3.zoom，scaleExtent 为 [0.5, 10]）以及过渡动画（基础过渡、交错延迟 transition().delay、缓动 easeBounceOut）。此外还提供响应式尺寸方案，通过容器 getBoundingClientRect 更新 SVG 宽高并监听 resize。比例尺参考表列出：scaleLinear 用于连续数值，scaleLog 用于指数/对数数据，scaleTime 用于日期时间轴，scaleBand 用于条形图分类，scaleOrdinal 用于分类颜色，scaleSequential 用于单色相渐变，scaleDiverging 用于发散色阶。
使用方式 资料说明无需后端，运行在浏览器或 Node.js（配合 jsdom/canvas）中。安装命令为 npm install d3，或在 HTML 中通过 CDN 引入 https://d3js.org/d3.v7.min.js。核心流程为：引入 d3（import * as d3 from 'd3'）；按标准图表结构绘制，包括清空上次渲染、设置宽高与边距、创建分组并平移、定义比例尺与坐标轴、绑定并生成数据元素。文档给出完整示例代码，涵盖 drawChart 函数结构以及各类图表片段。
适用场景 自定义视觉编码的图表、交互式探索、网络与层级关系展示、地理投影地图、编排化动画，以及对 SVG 样式和无障碍属性有较高要求的可视化。
限制与注意事项 资料列出最佳实践：绑定前过滤 null 与 NaN；重绘前用 svg.selectAll("*").remove() 清空；使用 .join() 而非分离的 enter/update/exit；添加 ARIA 标签（role="img"、aria-label）；元素超过 1000 个时考虑改用 Canvas 渲染；对 resize 处理做防抖；预先定义调色板以保持视觉一致。故障排查表列出：坐标轴不显示（检查比例尺域中的 NaN、确认分组 transform）、过渡不生效（在属性变更前调用 .transition()）、响应式尺寸失效（使用 ResizeObserver 或在 resize 时更新 SVG 宽高）、性能问题（改用 Canvas、防抖 resize、使用 .join()）。资料还列出相关技能：generate-asset-price-chart、trading-indicators-from-price-data、free-geocoding-and-maps。至于收费、价格与平台信息，资料暂未提供。