D3学习笔记

circle

circle（圆形）有3个主要属性

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

3个概念：

scaleLiner，线性映射。
domain（域），存放的是真实的数据。
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);

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