d3.js学习笔记

使用D3查询SVG

• d3.select(...)

d3.select('#rect1')
d3.select('#maingroup rect')

• d3.selectAll(...)

d3.selectAll('.rect1')
d3..selectAll('rect')
d3.selectAll('#maingroup rect'')

使用D3设置SVG中的属性

• element.attr(‘attr_name’, ‘attr_value’)
• 常见的属性：
  id，class，
  x， y， cx， cy，
  fill， stroke，
  width，height，r，
  transform -> translate, rotate, scale

<rect id="test" class="test" stroke="black" width="60" height="60" fill="#000" x="300" y="300"></rect>

// 设置元素属性
d3.select('.test').attr('x', '100');
// 链式调用，.attr(…)返回的是选择的图元本身
d3.select('svg').attr('width', '100').attr('height', '100').attr('x', '300').attr('y', '300');
// 获取元素属性
const svgWidth = d3.select('svg').attr('width');

• 修改组属性：

d3.select('#group').attr('transform', 'translate(100, 100)');

使用D3添加&删除SVG中的属性

• element.append(...)

const myRect = d3.select('#test').append('rect').attr('x', '100');
const wrap = d3.select('#wrap').append('g').attr('id', 'group');
// 链式调用
const myRect = d3.select('.wrap').append('g').attr('id', 'group')
.append('rect').attr('fill', 'black').attr('width', '100').attr('height', '100');

• element.remove(...)

d3.select('rect').remove()

D3数据读取- csv数据

• d3.csv(...) 是异步函数

d3.csv('test.csv').then(res => {
  console.log(data)
})

D3数值计算

• d3.max(array) // 返回数组中的最大值
• d3.min(array) // 返回数组中的最小值
• d3.extent(array) // 同时返回最小值与最大值，以数组的形式

d3.max([1, 2, 3, 5, 4]) // 5
d3.min([1, 2, 3, 5, 4]) // 1
d3.extent([1, 2, 3, 5, 4]) // [1, 5]
const arr = [
  {
      name: 'zhangsan',
      age: 20
    },
    {
      name: 'lisi',
      age: 30
    },
    {
      name: '王五',
      age: 40
    },
  ]

  // 回调函数形式
  const maxAge = d3.max(arr, d => d.age) // 40
  const minAge = d3.min(arr, d => d.age) // 20
  const ageArange = d3.extent(arr, d => age) // [20, 40]

D3线性比例尺

• 比例尺用于把实际数据空间映射到屏幕(画布)空间，即两个空间的转化
• d3.scaleLinear()：
  1、 定义一个线性比例尺，返回的是一个函数。
  2、eg: let scale = d3.scaleLinear(); // scale为函数
• scale.domain([min_d, max_d]).range([min, max])：
  1、设置比例尺的定义域与值域。
  2、线性比例尺的定义域和值域都是连续的，需分别给出最大值与最小值。
  3、const scale = d3.scaleLinear().domain([0, 100]).range([0, 1000]);
• 比例尺本质上是一个函数：

const scale = d3.scaleLinear().domain([0, 100]).range([0, 1000]);
console.log(scale(50)) // 500
console.log(scale(70)) // 700

• 常结合读取的数据与d3.max等接口连用：

  const arr = [
    {
      name: 'zhangsan',
      age: 20
    },
    {
      name: 'lisi',
      age: 30
    },
    {
      name: '王五',
      age: 40
    },
  ]

  const xScale = d3.scaleLinear()
    .domain([0, d3.max(arr, d => d.age)])
    .range([0, innerWidth])

D3Band比例尺

• d3.scaleBand():
  1、定义一个‘条带’比例尺，返回的是一个函数。
  2、eg: let scale = d3.scaleBand();
• scale.domain(array).range([min, max])：
  1、设置比例尺的定义域与值域。
  2、Band比例尺的定义域是离散的，值域是连续的。

const scale = d3.scaleBand().domain(['test1'，'test2'， 'test3']).range([0, 120]);
console.log(scale('test2')) // 40
console.log(scale('test3')) // 80

• 常结合array.map接口一起使用：

  const arr = [
    {
      name: 'zhangsan',
      age: 20
    },
    {
      name: 'lisi',
      age: 30
    },
    {
      name: '王五',
      age: 40
    },
  ]

  const yScale = d3.scaleBand()
    .domain(arr.map(d => d.name))
    .range([0, innerHeight])
    .padding(0.1)

坐标轴

• 定义坐标轴（获得结果仍是函数）
  1、const yAxis = d3.axisLeft(yScale);
  2、const xAxis = d3.axisBottom(xScale)；
  3、axisLeft：左侧坐标轴
  4、axisBottom：底侧坐标轴。
  5、坐标轴的刻度对应比例尺的定义域。
  5、坐标轴在画布的绘制对应比例尺的值域。
• 绘制坐标轴：
  1、const yAxisGroup = g.append('g').call(yAxis);
  2、const xAxisGroup = g.append('g').call(xAxis);
• 任何坐标轴在初始化之后会默认放置在坐标原点，需要进一步的平移

引入坐标轴 - Margin

const margin = {top: 60, right: 30, bottom: 60, left: 200}
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const g = svg.append('g').attr('id', 'maingroup')
.attr('transform', `translate(${margin.left}, ${margin.top})`);

Data-Join

• 本质上是将数据与图元进行绑定
• data(…)只考虑数据和图元数目相同的情况
• 调用形式：d3.selectAll(‘.class’).data(myData).join(‘图元’).attr(d => …).attr((d, i) => …)
• .join(…)会根据数据的条目补全or删除图元。
• 若有新增的数据，则会自动增加对应图元。
• 若有修改的数据，则会自动更新对应图元。
• 若有删除的数据，则会自动移除对应图元。

Data-Join – 用函数设置图元属性

• 通过值设置属性

d3.select('rect').attr('attrbuteName', 'value')

• 通过函数设置属性，函数的输入为绑定的数据，返回值为图元得到的属性值

d3.selectAll('rect').attr('width', (d, i) => d.age * 1000 )