使用精确控制构建自定义图表、图形和网络可视化。此技能帮助您使用D3.js为任何JavaScript框架创建出版级交互式图形。
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "d3-viz". 创建显示销售数据的柱状图：产品A（150）、产品B（230）、产品C（180）
النتيجة المتوقعة:
生成包含D3.js柱状图的React组件，包括：SVG设置、scaleBand x轴、scaleLinear y轴、axisBottom和axisLeft、带steelblue填充的样式化柱状条、产品和数值的坐标轴标签
استخدام "d3-viz". 构建带工具提示的交互式散点图
النتيجة المتوقعة:
创建D3.js散点图，包括：绑定到数据的circle元素、显示工具提示div的悬停事件监听器、mouseover时的过渡效果、带填充的计算x/y比例尺、轴生成器和标签
استخدام "d3-viz". 用我的网络数据制作力导向图
النتيجة المتوقعة:
实现D3.js forceSimulation，包括：forceManyBody用于节点排斥、forceLink用于边连接、forceCenter用于定位、带拖拽事件处理器的可拖拽节点、动态链接距离和强度计算
التدقيق الأمني
آمنAll static analysis findings are false positives from documentation files containing code examples. The 'Ruby/shell backtick execution' detections are markdown code blocks with JavaScript examples for D3.js. The 'MD5 hash' and 'C2 keyword' detections are legitimate terms in documentation context (hash properties in JSON, command in D3.js API). No actual security risks present - this is a legitimate visualization skill with safe template code and reference materials.
درجة الجودة
ماذا يمكنك بناءه
仪表板构建器
创建具有实时数据可视化的交互式仪表板，用于业务指标、分析或监控系统
研究可视化工具
将研究数据转换为用于学术论文或演示的出版级图表和图形
自定义图表设计器
构建超越标准图表库的品牌化可视化，用于营销或故事讲述
جرّب هذه الموجهات
使用D3.js创建一个柱状图来显示月度销售数据。包含坐标轴标签、标题，并使用steelblue颜色设置柱状条。图表宽度为800像素，高度为400像素。
使用D3.js构建一个交互式折线图来显示温度趋势。添加悬停工具提示，当鼠标移动到数据点上时显示数值。包含缩放功能以便检查特定时间范围。
使用D3.js创建一个力导向网络图来显示实体之间的关系。节点大小按重要性缩放，颜色按类别区分。添加拖拽功能以便用户可以重新定位节点。
使用D3.js设计一个堆叠面积图来比较多个数据系列随时间的变化。实现数据更新时的平滑过渡。包含图例并确保使用色盲友好的调色板。
أفضل الممارسات
- 在渲染前始终选择并清除SVG元素，以防止组件重新渲染时出现内存泄漏和重复可视化
- 对所有维度映射使用D3.js比例尺而非手动计算，这样可以确保一致的尺寸和更轻松的响应式设计
- 通过为SVG元素添加ARIA标签、标题和描述来实现适当的无障碍性，并测试色盲用户的配色方案
تجنب
- 避免在初始渲染后直接操作React管理的DOM与D3.js，这会破坏React的虚拟协调并导致性能问题
- 不要硬编码图表尺寸，始终使用容器查询或调整大小观察器来使可视化适应视口变化
- 在绑定到D3选择器之前一定不要省略数据验证，未验证的数据可能导致静默失败或神秘的渲染错误