技能 d3js-visualization
📦

d3js-visualization

內容修訂 r1 中風險 ⚙️ 外部命令🌐 網路存取

建置 D3.js 資料視覺化

自訂瀏覽器圖表通常需要在任何資料顯示之前做出許多 D3 決策。此技能為 Claude、Codex 和 Claude Code 提供圖表指引、範本、輔助工具與範例。

支援: Claude Codex Code(CC)
Maintain this Skill? Claim it 📊 76 尚可

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求
Review the Skillstore skill "d3js-visualization" from https://skillstore.io/skills/autumnsgrove-d3js-visualization.md and its manifest at https://skillstore.io/api/skills/autumnsgrove-d3js-visualization/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/autumnsgrove-d3js-visualization.md 已簽名 manifest GET /api/skills/autumnsgrove-d3js-visualization/manifest 已簽名 lockfile GET /api/skills/autumnsgrove-d3js-visualization/lockfile

測試它

正在使用「d3js-visualization」。 為每月營收建立響應式時間序列圖表。

預期結果:

  • 使用時間比例尺、折線產生器、清晰座標軸和懸停詳細資訊的圖表計畫。
  • 使用容器寬度、viewBox 尺寸和防抖 resize 處理的響應式計畫。
  • 無障礙標籤、對比度和鍵盤支援的檢查清單。

正在使用「d3js-visualization」。 比較三項產品的銷售額，並支援分組或堆疊檢視。

預期結果:

  • 具備 band scales、分組和堆疊模式以及動畫轉場的長條圖設計。
  • 用於切換產品可見性的圖例互動模型。
  • 避免對不受信任標籤使用不安全 HTML 的工具提示內容計畫。

正在使用「d3js-visualization」。 顯示團隊、專案和相依項目之間的關係。

預期結果:

  • 具備節點大小、群組著色、拖曳行為和懸停醒目提示的力導向網路計畫。
  • 涵蓋模擬參數和更新頻率的效能說明。
  • 關於縮放、平移、標籤和摘要統計的可用性說明。

安全審計

中風險
v8 • 2026/7/5 開啟版本化報告

Most static findings are false positives from JavaScript template literals, Markdown fences, identifiers named key, CSS grid text, and chart logic. The review confirms low-risk CDN script usage in examples and one medium browser XSS risk from raw tooltip HTML rendering. No prompt injection, credential access, shell execution, or malware intent was found.

15
已掃描檔案
5,811
分析行數
5
複核項目
0
已忽略的誤報

已確認的安全問題 (1)

中
scripts/chart-templates.js:909-922SKILL.md:157SKILL.md:274examples/bar-chart.html:583-589examples/line-chart.html:461-468examples/network-graph.html:453-462
Unsanitized Tooltip HTML Rendering
Tooltip helpers and examples pass data-derived strings to D3 .html(). If reused with untrusted labels or values, this can inject HTML or scripts into browser visualizations.
The code directly calls .html() with caller-provided or data-derived content. The bundled sample data is controlled, so exploitability depends on reuse with untrusted data.
能力複核項目 (5)

這些是真實的本機能力，對此技能而言可能是預期行為，因此需要複核，但不會按已確認的惡意行為計分。

低
examples/bar-chart.html:282
Hardcoded URL
<script src="https://d3js.org/d3.v7.min.js"></script>
This example or documentation uses a runtime D3 CDN script tag. It is a legitimate setup option, but copied browser examples execute third-party JavaScript from the network.
低
examples/line-chart.html:257
Hardcoded URL
<script src="https://d3js.org/d3.v7.min.js"></script>
This example or documentation uses a runtime D3 CDN script tag. It is a legitimate setup option, but copied browser examples execute third-party JavaScript from the network.
低
examples/network-graph.html:238
Hardcoded URL
<script src="https://d3js.org/d3.v7.min.js"></script>
This example or documentation uses a runtime D3 CDN script tag. It is a legitimate setup option, but copied browser examples execute third-party JavaScript from the network.
低
README.md:95
Hardcoded URL
<script src="https://d3js.org/d3.v7.min.js"></script>
This example or documentation uses a runtime D3 CDN script tag. It is a legitimate setup option, but copied browser examples execute third-party JavaScript from the network.
低
SKILL.md:59
Hardcoded URL
<script src="https://d3js.org/d3.v7.min.js"></script>
This example or documentation uses a runtime D3 CDN script tag. It is a legitimate setup option, but copied browser examples execute third-party JavaScript from the network.

風險因素

⚙️ 外部命令 (88)
examples/bar-chart.html:292 examples/bar-chart.html:337 examples/bar-chart.html:353 examples/bar-chart.html:451 examples/bar-chart.html:586-589 examples/bar-chart.html:676 examples/line-chart.html:309 examples/line-chart.html:325 examples/line-chart.html:464-468 examples/network-graph.html:254 examples/network-graph.html:259 examples/network-graph.html:271 examples/network-graph.html:276 examples/network-graph.html:291 examples/network-graph.html:306 examples/network-graph.html:307 examples/network-graph.html:397 examples/network-graph.html:457-462 examples/network-graph.html:568-571 references/advanced-patterns.md:41-45 references/advanced-patterns.md:45-104 references/advanced-patterns.md:180-184 references/advanced-patterns.md:208-222 references/advanced-patterns.md:244-251 references/common-pitfalls.md:113-114 references/d3-fundamentals.md:53-54 references/d3-fundamentals.md:253-255 references/d3-fundamentals.md:301-308 references/integration-patterns.md:23-45 references/integration-patterns.md:45-57 references/scales-and-axes.md:151-159 references/scales-and-axes.md:159-165 scripts/chart-templates.js:70 scripts/chart-templates.js:79 scripts/chart-templates.js:355 scripts/chart-templates.js:361 scripts/chart-templates.js:621 scripts/chart-templates.js:630 scripts/chart-templates.js:872 scripts/chart-templates.js:965 scripts/chart-templates.js:972 scripts/chart-templates.js:986 scripts/chart-templates.js:990 scripts/chart-templates.js:1005 scripts/data-helpers.js:702 scripts/data-helpers.js:703 SKILL.md:46-65 SKILL.md:65-69 SKILL.md:69-71 SKILL.md:71-73 SKILL.md:73-80 SKILL.md:80-84 SKILL.md:84-96 SKILL.md:96-116 SKILL.md:116-136 SKILL.md:136-142 SKILL.md:142-157 SKILL.md:157-167 SKILL.md:167-171 SKILL.md:171-177 SKILL.md:177-181 SKILL.md:181-204 SKILL.md:204-211 SKILL.md:211-214 SKILL.md:214-219 SKILL.md:219-220 SKILL.md:220-226 SKILL.md:226-250 SKILL.md:250-258 SKILL.md:258-267 SKILL.md:267-271 SKILL.md:271-274 SKILL.md:274-280 SKILL.md:280-284 SKILL.md:284-286 SKILL.md:286-290 SKILL.md:290-332 SKILL.md:332-339 SKILL.md:339-343 SKILL.md:343-346 SKILL.md:346-349 SKILL.md:349-352 SKILL.md:352-355 SKILL.md:355-358 SKILL.md:358-361 SKILL.md:361-364 SKILL.md:364-378 SKILL.md:378-379
🌐 網路存取 (13)
examples/bar-chart.html:282 examples/line-chart.html:257 examples/network-graph.html:238 README.md:95 SKILL.md:59 SKILL.md:399 SKILL.md:400 SKILL.md:404 SKILL.md:405 SKILL.md:408 SKILL.md:409 SKILL.md:412 SKILL.md:413
審計單位: codex 檢視審計紀錄 →
分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告
安全評估

複製報告連結

https://skillstore.io/skills/autumnsgrove-d3js-visualization/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/autumnsgrove-d3js-visualization/security.svg)](https://skillstore.io/skills/autumnsgrove-d3js-visualization?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/autumnsgrove-d3js-visualization?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/autumnsgrove-d3js-visualization/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/autumnsgrove-d3js-visualization.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
學術引用 (APA · BibTeX · CFF)

APA 引用

AutumnsGrove. (2026). d3js-visualization security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/autumnsgrove-d3js-visualization/audits/8

BibTeX 引用

@techreport{autumnsgrove-autumnsgrove-d3js-visualization-2026, author = {AutumnsGrove}, title = {d3js-visualization security audit report (audit version 8)}, institution = {Skillstore}, year = {2026}, number = {8}, url = {https://skillstore.io/skills/autumnsgrove-d3js-visualization/audits/8}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "d3js-visualization security audit report (audit version 8)" version: "unspecified" type: report authors: - name: "AutumnsGrove" date-released: "2026-07-05" url: "https://skillstore.io/skills/autumnsgrove-d3js-visualization/audits/8" identifiers: - type: other value: "skillstore:autumnsgrove-d3js-visualization:audit:8" description: "Skillstore immutable audit report identifier"

Skillstore 評分

評分依據 證據置信度: 高
82
架構
85
可維護性
87
內容
75
社群
83
規範符合度

你可以打造什麼

建立互動式儀表板圖表

為儀表板檢視建置具備座標軸、響應式尺寸、轉場和工具提示行為的自訂圖表。

準備用於視覺分析的資料

在算繪視覺化之前，將 CSV 風格資料轉換為分組、彙總且具型別的結構。

建立網路視覺化原型

使用力導向圖模式探索關係、節點群組、懸停狀態和互動式控制項。

試試這些提示

選擇圖表類型 
協助我為此資料集和目標選擇最佳 D3.js 圖表類型：[describe data and audience]。說明取捨。
建置響應式圖表 
為 [data shape] 建立響應式 D3.js 圖表計畫。包含比例尺、座標軸、邊距慣例、互動和無障礙注意事項。
調整範本 
調整可重複使用的 D3 範本以用於 [line, bar, scatter, or pie]。包含所需設定、資料存取器和更新行為。
設計進階視覺化 
為 [complex dataset] 設計進階 D3.js 視覺化。包含效能策略、互動模型、資料轉換和正式環境風險。

最佳實務

  • 撰寫 D3 程式碼之前，先從圖表選擇指南開始。
  • 使用穩定的資料 join 和 key functions，以獲得可預測的更新。
  • 使用真實資料量、長標籤和小型檢視區測試圖表。

避免

  • 對較小型圖表函式庫即可處理的簡單圖表使用 D3.js。
  • 未經清理就透過 HTML 工具提示算繪不受信任的值。
  • 當資料 join 可以只更新變更的元素時，卻在每次互動時重新繪製所有元素。

常見問題

此技能可以協助建立什麼？
它可協助建立自訂 D3.js 圖表、可重複使用的範本、資料輔助工具和互動式瀏覽器視覺化。
它包含可運作的範例嗎？
是。它包含可在瀏覽器中執行的折線圖、長條圖和網路圖範例。
它可以協助選擇正確的圖表嗎？
可以。它包含時間序列、比較、關係、分布和網路資料的指引。
它支援前端框架嗎？
支援。參考資料討論 React、Vue、Angular 和 Svelte 的整合模式。
它預設已可用於正式環境嗎？
否。正式環境使用時應加入資料驗證、更安全的工具提示算繪、相依項目版本鎖定和專案測試。
哪些 AI 工具可以使用它？
報告列出支援 Claude、Codex 和 Claude Code。

開發者詳細資訊

授權

MIT

Skillstore 修訂

r1

版本提示

作者未聲明版本。

儲存庫

https://github.com/AutumnsGrove/ClaudeSkills/tree/master/d3js-visualization

引用

5ab1d37e83436c6eef84de88573e142b94f2a4ad

維護新鮮度

2026/7/18

使用量

77 次下載 · 530 次瀏覽

檔案結構

📁 examples/

📄 bar-chart.html

📄 line-chart.html

📄 network-graph.html

📁 references/

📄 advanced-patterns.md

📄 chart-types.md

📄 common-pitfalls.md

📄 d3-fundamentals.md

📄 data-transformation.md

📄 integration-patterns.md

📄 paths-and-shapes.md

📄 scales-and-axes.md

📁 scripts/

📄 chart-templates.js

📄 data-helpers.js

📄 README.md

📄 SKILL.md

AutumnsGrove 的更多技能

查看全部

相關技能

查看全部