免费在 GitHub 公开

example-d3-animation

Learn how to use D3.js with Helios for data visualization. Use when creating charts, graphs, or data-driven animations.

中文简介正在准备中。当前显示原文说明。

BintzGavin/helios星标 123(GitHub 123 + cccskills 0)

实测评分未实测

查看安装方法

包含的文件（1）

SKILL.md1.7 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

D3.js Animation

Integrate D3.js with Helios by driving D3 scales and attributes using the Helios frame/time state.

Quick Start

import { Helios } from '@helios-project/core';
import * as d3 from 'd3';

const helios = new Helios({ duration: 5, fps: 60 });
const svg = d3.select('#chart');

// Data
const data = [10, 20, 30, 40, 50];

// Setup D3
const x = d3.scaleLinear().domain([0, 50]).range([0, 500]);
const bars = svg.selectAll('rect').data(data).enter().append('rect')
  .attr('height', 20)
  .attr('y', (d, i) => i * 25);

// Animate
helios.subscribe(({ currentFrame, fps }) => {
  const time = currentFrame / fps;

  // Update D3 attributes based on time
  bars.attr('width', d => x(d) * Math.min(1, time));
});

Key Patterns

Frame-Driven Scales

Instead of using d3.transition(), use helios.subscribe() to update attributes on every frame. This ensures frame-perfect rendering and seeking.

helios.subscribe((state) => {
  const t = state.currentFrame / (state.duration * state.fps); // 0 to 1

  // Interpolate data
  const interpolatedData = data.map(d => d * t);

  // Re-bind and render
  path.datum(interpolatedData).attr('d', lineGenerator);
});

Common Issues

d3.transition(): Do NOT use d3.transition(). It relies on internal timers that won't sync with Helios's seek/render cycle. Always set attributes directly in the subscription callback.
Performance: For large datasets, consider using Canvas with D3 (d3-force + Canvas API) instead of SVG for better performance.

Source

Example: examples/d3-animation/

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能

animated-video-philosophy

免费

Story-first motion design philosophy for animated video: motion must earn its place; arc (establish, complicate, resolve); show vs tell; shots as units of thought; quiet vs loud motion; Disney principles with restraint; timing heuristics; composition; grammar by medium (product demos, logos, data viz, explainers); technical commitments (deterministic time, scrubbability, refs); cutting discipline; explicit anti-patterns. Use when planning, storyboarding, critiquing, or implementing programmatic or motion-driven video (Helios, Remotion, explainers, loops, UI capture, logo reveals), or when the user asks for motion direction, pacing, or visual-story structure.

中文简介正在准备中。当前显示原文说明。