D3 学习

D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及 HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术结合起来, 让你可以借助于现代浏览器的强大功能自由的对数据进行可视化。

坐标系

左上角为原点，同 �canvas，向右为 X 轴正方向，向下为 Y 轴正方向

API

select()

// 类 jq 选择器
const svg = d3.select('svg');
svg.selectAll('.MyRect');

data()

// 绑定数据
const dataset = [30, 10, 43, 55, 13];
svg.selectAll('.MyRect').data(dataset);

enter,append

// 添加 element 至 svg
svg
  .selectAll('.MyRect')
  .data(dataset)
  .enter()
  .append('rect');

scale(),axis()

// 数据与图示比例关系；Y轴数据对应�高度；[0,100] =>[0,500]
const yScale = d3
  .scaleLinear()
  .domain([0, 100])
  .range([0, 500]);

// ��定义左侧Y轴，并绑定Scale
const yAxis = d3.axisLeft().scale(yScale);

extent()

// 对data有序化，返回[min,max],�同d3.min,d3.max
d3.extent(data, d => d.date);

Shape

Line(Path，贝塞尔，)

简化 SVG path 元素 code，例：<path d="M10 10 H 90 V 90 H 10 L 10 10"/>

// line data
const line = d3
  .line()
  // x轴赋值
  .x(d => xScale(d.date))
  // y轴赋值
  .y(d => yScale(d[city]))
  // 非直线连接，贝塞尔曲线连接数据点
  .curve(d3.curveCatmullRom);

Pie(arc)

闭合的 path 形成扇形，多个 arc 组成圆型（饼图）

const dataset = [30, 10, 43, 55, 13];
const arc = d3
  .arc()
  .innerRadius(0)
  .outerRadius(100);

Update and Exit

enter(),update(),exit(),merge()

对 select 的 element（�selection）进行 � 操作，

🌰

const bars = svg.selectALl('rect').data(data, d => d);

// 删除多余节点
bars.exit().remove();

const enter = bars
  .enter()
  .append('rect')
  .attr('width', rectWidth)
  .attr('stroke', '#fff');

// 合并2个selection
bars = enter
  .merge(bars)
  .attr('x', (d, i) => i * rectWidth)
  .attr('y', d => height - d)
  .attr('height', d => d)
  .attr('fill', d => colors(d));