D3.js 与图形语法

# 只装需要的子包，而不是整包 280KB
npm i d3-selection d3-scale d3-shape d3-axis d3-array

# 或者装整包（开发方便，生产建议按需）
npm i d3

import { select } from 'd3-selection';
import { scaleLinear } from 'd3-scale';
import { line, curveMonotoneX } from 'd3-shape';

const data = [30, 86, 168, 281, 303];

select('svg')
  .selectAll('rect')             // 选中的是「将要存在」的元素
  .data(data)                    // 绑定数据，按索引或 key 匹配
  .join(
    (enter) => enter.append('rect')            // 新增：创建元素
      .attr('fill', '#2f6fed')
      .attr('height', 0)
      .call((e) => e.transition().attr('height', (d) => d)),
    (update) => update.attr('fill', '#2f6fed'), // 更新：只改属性
    (exit) => exit.call((e) => e.transition().attr('height', 0).remove()),
  );

.data(rows, (d) => d.id)   // 按 id 匹配，重排序时元素会跟随移动

import { scaleLinear, scaleBand, scaleSequential } from 'd3-scale';
import { interpolateViridis } from 'd3-scale-chromatic';

const x = scaleBand().domain(data.map((d) => d.name)).range([0, width])
  .paddingInner(0.2).paddingOuter(0.1);   // 组内/组外间距（比例）
const y = scaleLinear().domain([0, maxValue]).nice()   // nice() 扩到整洁边界
  .range([height, 0]);                                  // Y 轴反转，SVG 原点在左上
const color = scaleSequential(interpolateViridis).domain([0, maxValue]);

import { axisBottom, axisLeft } from 'd3-axis';

const xAxis = axisBottom(x).ticks(6)          // 建议刻度数，D3 选「整洁」的值
  .tickFormat((d) => `${d}月`).tickSizeOuter(0);
const yAxis = axisLeft(y).ticks(5, '~s')      // SI 前缀：12k, 1.2M
  .tickSize(-width);                          // 负值让刻度线变成网格线

svg.append('g').attr('transform', `translate(0,${height})`).call(xAxis);
svg.append('g').call(yAxis)
  .selectAll('.tick line').attr('stroke', '#eee');   // 网格线调淡

import { line, area, curveMonotoneX, arc, pie } from 'd3-shape';

const lineGen = line().x((d) => x(d.date)).y((d) => y(d.value))
  .curve(curveMonotoneX)              // 单调三次插值，不产生虚假极值
  .defined((d) => d.value != null);   // 空值处断开

const areaGen = area().x((d) => x(d.date)).y0(height).y1((d) => y(d.value))
  .curve(curveMonotoneX);

// 饼图：pie 生成角度，arc 生成路径
const pieGen = pie().value((d) => d.value).sort(null);
const arcGen = arc().innerRadius(60).outerRadius(100);

svg.selectAll('path.slice').data(pieGen(data)).join('path')
  .attr('class', 'slice').attr('d', arcGen)
  .attr('fill', (d) => color(d.data.name));

import { forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide } from 'd3-force';

const simulation = forceSimulation(nodes)
  .force('link', forceLink(links).id((d) => d.id).distance(60).strength(0.5))
  .force('charge', forceManyBody().strength(-200))   // 负值表示斥力
  .force('center', forceCenter(width / 2, height / 2))
  .force('collide', forceCollide().radius((d) => d.r + 2))  // 防重叠
  .alphaDecay(0.0228)          // 默认衰减，越小越慢越稳
  .on('tick', ticked);

function ticked() {
  link.attr('x1', (d) => d.source.x).attr('y1', (d) => d.source.y)
      .attr('x2', (d) => d.target.x).attr('y2', (d) => d.target.y);
  node.attr('cx', (d) => d.x).attr('cy', (d) => d.y);
}

import { hierarchy, tree, treemap, pack, partition } from 'd3-hierarchy';

const root = hierarchy(nestedData).sum((d) => d.value)      // 自底向上汇总
  .sort((a, b) => b.value - a.value);

tree().size([width, height])(root);                          // 树状图：层级关系
treemap().size([width, height]).padding(2).round(true)(root); // 矩形树图：层级 + 占比
pack().size([width, height]).padding(3)(root);                // 打包圆：层级 + 量级

// 访问结果：root.descendants() 与 root.links()，坐标为 d.x/d.y/d.r 或 d.x0/d.y0/d.x1/d.y1

import { transition } from 'd3-transition';
import { interpolateNumber, interpolateRgb, interpolateString } from 'd3-interpolate';
import { easeCubicOut } from 'd3-ease';

select('rect')
  .transition()
  .duration(300)
  .ease(easeCubicOut)
  .delay((d, i) => i * 20)        // 错开，形成瀑布效果
  .attr('height', (d) => height - y(d.value))
  .attr('fill', (d) => color(d.value));

// 新数据到达时中断旧过渡
select('rect').interrupt().transition().duration(300).attr('width', (d) => x(d.value));

{
  "data": { "url": "sales.csv" },
  "mark": "bar",
  "encoding": {
    "x": { "field": "region", "type": "nominal", "sort": "-y" },
    "y": { "field": "sales", "type": "quantitative", "aggregate": "sum" },
    "color": { "field": "category", "type": "nominal" }
  }
}

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// 用 D3 的比例尺，但用 Canvas 绘制
function draw(data) {
  ctx.clearRect(0, 0, width, height);
  ctx.fillStyle = '#2f6fed';
  for (const d of data) {
    // 圆形散点：arc 比 rect 慢，用 rect 做近似可提速数倍
    ctx.fillRect(x(d.x) - 2, y(d.y) - 2, 4, 4);
  }
}

// 按颜色批量绘制，避免在循环里切换 fillStyle
const byColor = groupBy(data, (d) => d.category);
for (const [color, items] of Object.entries(byColor)) {
  ctx.fillStyle = colorMap[color];
  ctx.beginPath();
  for (const d of items) ctx.rect(x(d.x) - 2, y(d.y) - 2, 4, 4);
  ctx.fill();
}

// worker.js：Worker 里跑力导向，主线程只画
importScripts('/vendor/d3-force.min.js');
self.onmessage = ({ data }) => {
  const sim = d3.forceSimulation(data.nodes)
    .force('link', d3.forceLink(data.links).id((d) => d.id))
    .force('charge', d3.forceManyBody()).stop();
  for (let i = 0; i < 300; i++) sim.tick();   // 同步跑完，不逐帧渲染
  self.postMessage({ nodes: data.nodes });
};

function barChart() {
  let width = 600, height = 320, value = (d) => d.value;
  const margin = { top: 20, right: 20, bottom: 30, left: 50 };

  function chart(selection) {
    selection.each(function (data) {
      const innerW = width - margin.left - margin.right;
      const innerH = height - margin.top - margin.bottom;
      const x = scaleBand().domain(data.map((d, i) => i)).range([0, innerW]).padding(0.2);
      const y = scaleLinear().domain([0, max(data, value)]).nice().range([innerH, 0]);

      const g = select(this).selectAll('g.plot').data([data])
        .join('g').attr('class', 'plot')
        .attr('transform', `translate(${margin.left},${margin.top})`);

      g.selectAll('rect').data(data).join('rect')
        .attr('x', (d, i) => x(i)).attr('y', (d) => y(value(d)))
        .attr('width', x.bandwidth()).attr('height', (d) => innerH - y(value(d)));
    });
  }

  // 链式配置：chart.width(800) 既做 setter 也返回自身
  chart.width = (v) => (v == null ? width : ((width = v), chart));
  chart.value = (v) => (v == null ? value : ((value = v), chart));
  return chart;
}

select('#container').datum(salesData).call(barChart().width(720).value((d) => d.amount));