D3学习笔记


参考:例子网站1例子网站2树1

circle

circle(圆形)有3个主要属性

  1. cx、cy,圆心的坐标
  2. r,半径

线性映射

1
2
3
4
const scale = d3.scaleLiner();
scale.domain = ([100, 200]);
scale.range = ([10, 50]);
const output = scale(50);

3个概念:

  1. scaleLiner,线性映射。
  2. domain(域),存放的是真实的数据。
  3. range(范围),映射后的范围。 domain中的数据会被线性映射到range中。scale(50);中的50是domain中的值,output为映射后的值。

最值

1
2
const positionData = [[1, 7, -4],[6, 3, 8],[2, 8, 3]]
const maxZ = d3.max(positionData, (d)=>d[2])

动态缩放

处理复杂数据的第一步是确定缩放比例,才能让所有数据点都包含在svg画布中。

1
2
3
const xScale = d3.scaleLinear()
  .domain([0, d3.max(dataset, (d) => d[0])])
  .range([padding, w - padding]);

在数据集中找到最大最小值,作为domain的边界,将数据集映射到画布大小的range

坐标轴

1
2
3
4
5
const yAxis = d3.axisLeft(yScale);

svg.append("g")
  .attr("transform", "translate(0," + (h - padding) + ")")
  .call(xAxis);

svg的image元素

1
2
3
4
5
6
7
<image 
  fill="#000000" 
  x={x} y={x}
  width={w} height={h} 
  preserveAspectRatio="none"
  xlinkHref={mark.point.image} 
/>
updatedupdated2020-10-122020-10-12