Orqestria Letöltés
← ERP rendszer építők adatlapja

Skill · 1.0.0 verzió

Egyedi D3-vizualizációk

D3-geometriával és egyértelmű megjelenítési felelősséggel készít egyedi adatábrákat a meglévő felületbe.

d3-custom-visualization

Ezt a skillt használó csapattagok

Nézd meg, miben segít

Mikor hasznos?

Akkor használd, ha szokásos diagram nem fejez ki kapcsolatot, folyamatot vagy összekötött kijelölést.

Miben segít neked?

  • Elválasztja az adatok koordinátává alakítását a felületi elemektől.
  • Kezeli az üres méretet, azonos értékeket és skálaszélsőségeket.
  • Elkülöníti és megszünteti az interakciós figyelőket és szimulációkat.

Például ezt kérheted

Készíts reszponzív ügyfélút-ábrát összekapcsolt kijelöléssel, üres és azonos értékű adatok kezelésével. Töröld az összes utat, majd tölts be azonos értékű folyamatokat és méretezz át. A diagram maradjon érvényes, a kiválasztás azonosítója megőrződjön.

Részletes dokumentáció

Itt a skill eredeti útmutatóját, példáit és ellenőrzési szempontjait olvashatod az eredeti nyelven.

Részletek…Összecsukás

D3 & Custom Visualization

Use this skill when standard chart types are insufficient and custom visual encodings (e.g., Sankey diagrams, hierarchical treemaps/sunbursts, chord/network graphs, horizon charts, beeswarm/force layouts, or custom linked brushes) are needed.

Clean Architecture: D3 for Math, Framework for DOM (or Scoped Hybrid)

  1. Separate Pure Data-to-Geometry Math from Rendering (Bostock):
    • Use modular D3 packages (d3-scale, d3-array, d3-shape, d3-hierarchy, d3-sankey, d3-geo, d3-time) as pure mathematical functions that transform domain data into screen coordinates, paths, and ticks.
    • In React, Vue, or Angular, let the UI framework own the declarative SVG/HTML elements whenever mark counts are moderate—avoid having both D3 .enter().append() and React/Vue mutate the same DOM subtree simultaneously.
    • Reserve imperative D3 DOM/Canvas bindings (d3-selection, d3-brush, d3-zoom, d3-force tick loops) for isolated <g ref={...}> or <canvas ref={...}> subtrees with strict cleanup on unmount.

Scales, Margins & Edge-Case Guards

  • Margin Convention & Bounded Inner Dimensions:
    • Compute innerWidth = Math.max(0, width - margin.left - margin.right) and innerHeight = Math.max(0, height - margin.top - margin.bottom) so zero or initializing container sizes never produce negative SVG dimensions or NaN paths.
  • Degenerate Domain Protection:
    • When all data values are identical (domainMin === domainMax), expand or pad the scale domain deterministically so linear/log scales do not collapse to a single pixel or divide by zero.
    • Use .clamp(true) or explicit out-of-bounds indicators when external values can exceed fixed scale domains.
  • Avoid Misleading Curve Interpolations:
    • Do not use curveBasis (which fails to pass through actual data points and shaves off peaks) or curveCardinal / curveCatmullRom (which can overshoot below zero on non-negative data). Use curveLinear, curveMonotoneX (which preserves monotonicity without false overshoots), or curveStepAfter for discrete state changes.

Checklist

  • Are D3 math modules (d3-scale, d3-shape, d3-array) used cleanly without conflicting with the UI framework's virtual DOM?
  • Do scales guard against empty arrays, min === max degenerate domains, and zero/negative container sizes?
  • Is curveMonotoneX, curveLinear, or curveStep* used instead of peak-clipping curveBasis or overshooting splines?
  • Are d3-zoom, d3-brush, and d3-force timers/listeners properly cleaned up on component unmount?

Csomagban lévő fájlok 1

  • SKILL.md