王书硕的博客

D3学习笔记

Posted on Jul 20, 2019

参考：例子网站1，例子网站2，树1

circle

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

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

线性映射

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为映射后的值。

最值

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

动态缩放

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

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

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

坐标轴

const yAxis = d3.axisLeft(yScale);

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

svg的image元素

<image 
  fill="#000000" 
  x={x} y={x}
  width={w} height={h} 
  preserveAspectRatio="none"
  xlinkHref={mark.point.image} 
/>