المهارات d3js-visualization
📊
d3js-visualization
آمن ⚙️
الأوامر الخارجية🌐
الوصول إلى الشبكة
Создание интерактивных визуализаций D3.js
Создавайте профессиональные интерактивные визуализации данных с помощью D3.js. Создавайте пользовательские графики, панели мониторинга, сетевые графы и отображения в реальном времени с полным контролем над каждым визуальным элементом.
يدعم: Claude Codex Code(CC)
1
تنزيل ZIP المهارة
2
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
3
فعّل وابدأ الاستخدام
اختبرها
استخدام "d3js-visualization". Create a bar chart showing monthly sales data
النتيجة المتوقعة:
- SVG столбчатая диаграмма с ежемесячными метками на оси x
- Значения продаж отображаются на оси y с правильным масштабированием
- Цветовое кодирование столбцов для разных категорий продуктов
- Всплывающие подсказки при наведении с точными значениями
- Плавная анимация при загрузке данных
استخدام "d3js-visualization". Build a network graph of social connections
النتيجة المتوقعة:
- Силовой граф с соединенными узлами
- Функциональность перетаскивания для переупорядочивания узлов
- Цветовое кодирование по сообществу или группе
- Подсветка при наведении с отображением деталей связей
- Возможности масштабирования и панорамирования
التدقيق الأمني
آمنv5 • 1/16/2026
All 399 static findings are FALSE POSITIVES. The static analyzer confused markdown code formatting with shell execution, CSS selectors with reconnaissance, and D3 data binding property names with cryptographic keys. This is a legitimate D3.js visualization skill containing only standard charting code.
16
الملفات التي تم فحصها
6,116
الأسطر التي تم تحليلها
2
النتائج
5
إجمالي عمليات التدقيق
عوامل الخطر
⚙️ الأوامر الخارجية (271)
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 README.md:7-18 README.md:18-36 README.md:36-37 README.md:37-38 README.md:38-39 README.md:39-91 README.md:91-94 README.md:94-112 README.md:112-115 README.md:115-131 README.md:131-134 references/advanced-patterns.md:7-41 references/advanced-patterns.md:41-45 references/advanced-patterns.md:45-104 references/advanced-patterns.md:104-112 references/advanced-patterns.md:112-127 references/advanced-patterns.md:127-131 references/advanced-patterns.md:131-139 references/advanced-patterns.md:139-151 references/advanced-patterns.md:151-169 references/advanced-patterns.md:169-173 references/advanced-patterns.md:173-180 references/advanced-patterns.md:180-184 references/advanced-patterns.md:184-188 references/advanced-patterns.md:188-208 references/advanced-patterns.md:208-222 references/advanced-patterns.md:222-228 references/advanced-patterns.md:228-236 references/advanced-patterns.md:236-240 references/advanced-patterns.md:240-244 references/advanced-patterns.md:244-251 references/advanced-patterns.md:251-255 references/advanced-patterns.md:255-272 references/common-pitfalls.md:9-14 references/common-pitfalls.md:14-18 references/common-pitfalls.md:18-30 references/common-pitfalls.md:30-38 references/common-pitfalls.md:38-44 references/common-pitfalls.md:44-48 references/common-pitfalls.md:48-54 references/common-pitfalls.md:54-69 references/common-pitfalls.md:69-74 references/common-pitfalls.md:74-78 references/common-pitfalls.md:78-84 references/common-pitfalls.md:84-92 references/common-pitfalls.md:92-98 references/common-pitfalls.md:98-102 references/common-pitfalls.md:102-113 references/common-pitfalls.md:113-114 references/common-pitfalls.md:114-122 references/common-pitfalls.md:122-129 references/common-pitfalls.md:129-133 references/common-pitfalls.md:133-148 references/common-pitfalls.md:148-156 references/common-pitfalls.md:156-159 references/common-pitfalls.md:159-163 references/common-pitfalls.md:163-166 references/common-pitfalls.md:166-174 references/common-pitfalls.md:174-179 references/common-pitfalls.md:179-183 references/common-pitfalls.md:183-188 references/common-pitfalls.md:188-196 references/common-pitfalls.md:196-199 references/common-pitfalls.md:199-203 references/common-pitfalls.md:203-207 references/common-pitfalls.md:207-215 references/common-pitfalls.md:215-219 references/common-pitfalls.md:219-223 references/common-pitfalls.md:223-228 references/d3-fundamentals.md:9-29 references/d3-fundamentals.md:29-36 references/d3-fundamentals.md:36-44 references/d3-fundamentals.md:44-53 references/d3-fundamentals.md:53-54 references/d3-fundamentals.md:54-60 references/d3-fundamentals.md:60-78 references/d3-fundamentals.md:78-82 references/d3-fundamentals.md:82-94 references/d3-fundamentals.md:94-100 references/d3-fundamentals.md:100-113 references/d3-fundamentals.md:113-117 references/d3-fundamentals.md:117-143 references/d3-fundamentals.md:143-151 references/d3-fundamentals.md:151-165 references/d3-fundamentals.md:165-169 references/d3-fundamentals.md:169-184 references/d3-fundamentals.md:184-188 references/d3-fundamentals.md:188-199 references/d3-fundamentals.md:199-203 references/d3-fundamentals.md:203-217 references/d3-fundamentals.md:217-221 references/d3-fundamentals.md:221-228 references/d3-fundamentals.md:228-234 references/d3-fundamentals.md:234-253 references/d3-fundamentals.md:253-255 references/d3-fundamentals.md:255-259 references/d3-fundamentals.md:259-274 references/d3-fundamentals.md:274-278 references/d3-fundamentals.md:278-291 references/d3-fundamentals.md:291-295 references/d3-fundamentals.md:295-301 references/d3-fundamentals.md:301-308 references/data-transformation.md:7-12 references/data-transformation.md:12-16 references/data-transformation.md:16-20 references/data-transformation.md:20-24 references/data-transformation.md:24-31 references/data-transformation.md:31-35 references/data-transformation.md:35-46 references/data-transformation.md:46-52 references/data-transformation.md:52-54 references/data-transformation.md:54-58 references/data-transformation.md:58-60 references/data-transformation.md:60-64 references/data-transformation.md:64-66 references/data-transformation.md:66-70 references/data-transformation.md:70-73 references/data-transformation.md:73-77 references/data-transformation.md:77-84 references/data-transformation.md:84-88 references/data-transformation.md:88-90 references/data-transformation.md:90-94 references/data-transformation.md:94-100 references/data-transformation.md:100-106 references/data-transformation.md:106-109 references/data-transformation.md:109-113 references/data-transformation.md:113-120 references/data-transformation.md:120-124 references/data-transformation.md:124-127 references/data-transformation.md:127-131 references/data-transformation.md:131-138 references/data-transformation.md:138-142 references/data-transformation.md:142-154 references/data-transformation.md:154-160 references/data-transformation.md:160-178 references/data-transformation.md:178-182 references/data-transformation.md:182-192 references/integration-patterns.md:5-23 references/integration-patterns.md:23-45 references/integration-patterns.md:45-57 references/integration-patterns.md:57-61 references/integration-patterns.md:61-95 references/integration-patterns.md:95-99 references/integration-patterns.md:99-126 references/integration-patterns.md:126-130 references/integration-patterns.md:130-155 references/integration-patterns.md:155-161 references/integration-patterns.md:161-167 references/integration-patterns.md:167-171 references/integration-patterns.md:171-173 references/integration-patterns.md:173-177 references/integration-patterns.md:177-187 references/integration-patterns.md:187-191 references/integration-patterns.md:191-201 references/paths-and-shapes.md:5-16 references/paths-and-shapes.md:16-20 references/paths-and-shapes.md:20-29 references/paths-and-shapes.md:29-33 references/paths-and-shapes.md:33-44 references/paths-and-shapes.md:44-48 references/paths-and-shapes.md:48-69 references/paths-and-shapes.md:69-73 references/paths-and-shapes.md:73-97 references/scales-and-axes.md:11-16 references/scales-and-axes.md:16-22 references/scales-and-axes.md:22-26 references/scales-and-axes.md:26-30 references/scales-and-axes.md:30-35 references/scales-and-axes.md:35-41 references/scales-and-axes.md:41-45 references/scales-and-axes.md:45-49 references/scales-and-axes.md:49-53 references/scales-and-axes.md:53-61 references/scales-and-axes.md:61-65 references/scales-and-axes.md:65-71 references/scales-and-axes.md:71-79 references/scales-and-axes.md:79-85 references/scales-and-axes.md:85-90 references/scales-and-axes.md:90-98 references/scales-and-axes.md:98-102 references/scales-and-axes.md:102-108 references/scales-and-axes.md:108-112 references/scales-and-axes.md:112-118 references/scales-and-axes.md:118-122 references/scales-and-axes.md:122-128 references/scales-and-axes.md:128-132 references/scales-and-axes.md:132-138 references/scales-and-axes.md:138-151 references/scales-and-axes.md:151-159 references/scales-and-axes.md:159-165 references/scales-and-axes.md:165-169 references/scales-and-axes.md:169-176 references/scales-and-axes.md:176-182 references/scales-and-axes.md:182-193 references/scales-and-axes.md:193-197 references/scales-and-axes.md:197-206 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
🌐 الوصول إلى الشبكة (17)
تم تدقيقه بواسطة: claude عرض سجل التدقيق →
درجة الجودة
82
الهندسة المعمارية
100
قابلية الصيانة
85
المحتوى
23
المجتمع
100
الأمان
91
الامتثال للمواصفات
ماذا يمكنك بناءه
Создание графиков для панели мониторинга
Создавайте интерактивные панели мониторинга с несколькими синхронизированными графиками для бизнес-аналитики и отчетности.
Пользовательские визуализации данных
Реализуйте уникальные визуализации данных за пределами возможностей стандартных библиотек построения графиков.
Исследование сетевых данных
Визуализируйте сложные связи, социальные сети и иерархические структуры с помощью силовых графов.
جرّب هذه الموجهات
Простая линейная диаграмма
Создайте линейную диаграмму D3.js, отображающую данные во времени с осями x и y, метками и плавной линией, соединяющей точки данных.
Столбчатая диаграмма
Создайте групповую столбчатую диаграмму в D3.js, сравнивающую несколько категорий за разные периоды времени с легендой.
Интерактивные всплывающие подсказки
Добавьте всплывающие подсказки к диаграмме D3.js, показывающие подробную информацию при наведении курсора на точки данных, с плавным позиционированием.
Сетевой граф
Создайте силовой сетевой граф в D3.js с перетаскиваемыми узлами, визуализацией связей и кластеризацией узлов по группам.
أفضل الممارسات
- Используйте соглашение об отступах для правильного интервала вокруг элементов графика
- Применяйте ключевые функции в объединениях данных для последовательного сопоставления элементов с данными
- Используйте SVG для менее чем 1 000 элементов, Canvas для больших наборов данных
- Включайте правильные метки осей и легенды для доступности
تجنب
- Избегайте жесткого задания размеров графика без адаптивной обработки
- Не пропускайте паттерн enter/update/exit в объединениях данных
- Избегайте использования одного цвета для смежных элементов данных без четкого разграничения
- Не забывайте очищать предыдущие отрисовки перед обновлением графиков
الأسئلة المتكررة
Что такое D3.js?
D3.js — это библиотека JavaScript для создания динамических интерактивных визуализаций данных в веб-браузерах с использованием SVG, HTML и CSS.
Чем D3.js отличается от Chart.js?
D3.js обеспечивает полный контроль над каждым визуальным элементом, но имеет более крутую кривую обучения, в то время как Chart.js предлагает более простые стандартные графики с меньшими возможностями настройки.
Можно ли использовать D3.js с React или Vue?
Да, D3.js хорошо работает с React, Vue, Angular и Svelte с использованием паттернов интеграции, таких как управляемые компоненты или D3 только для вычислений.
Как сделать графики адаптивными?
Используйте атрибуты viewBox, CSS max-width и обработчики событий изменения размера с debouncing для пересчета размеров при изменении окна.
Какой тип графика использовать для временных рядов?
Линейные диаграммы идеальны для данных временных рядов. Используйте диаграммы с областями для отображения накопленных итогов и столбчатые диаграммы для дискретных периодов времени.
Как улучшить производительность с большими наборами данных?
Переключитесь с SVG на рендеринг Canvas, агрегируйте или семплируйте данные, используйте debounce для обработчиков изменения размера и минимизируйте ненужные перерисовки.