参考:例子网站1,例子网站2,树1
circle(圆形)有3个主要属性
- cx、cy,圆心的坐标
- r,半径
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}
/>
|