02 d3基础

02 基础

2-数据可视化编程2023-基础-第二节.mp4

D3比例尺

scaleLinear

• d3.scaleLinear()
  • 定义一个线性比例尺，返回的是一个函数。
  • e.g.let scale = d3.scaleLinear();
• scale.domain([min_d, max_d]).range([min, max])：
  • 设置比例尺的定义域与值域。
  • 定义域 : 数据的范围
  • 值域：坐标轴的px范围
  • 线性比例尺的定义域和值域都是连续的(Continuous)，需分别给出最大值与最小值。
  • e.g.const scale = d3.scaleLinear().domain([20, 80]).range([0, 120]);
• 常在初始化中结合读取的数据与d3.max等接口连用

const xScale = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).range([0, innerWidth]);

scaleBand

• d3.scaleBand()：
  • 定义一个‘条带’比例尺，返回的是一个函数。
  • e.g. let scale = d3.scaleBand();
• scale.domain(array).range([min, max])：
  • 设置比例尺的定义域与值域
  • Band比例尺的定义域是离散的(Discrete)，值域是连续的(柱状图)
  • e.g., const scale = d3.scaleBand().domain([‘a’, ‘b’, ‘c’]).range([0, 120]);
• 常结合JavaScript的array.map接口一起使用：

let a = [{name: 'Shao-Kui', value:6}, {name:'Wen-Yang', value:6}, {name:’Yuan Liang', value:16}] 
a.map(d => d.name) // [‘Shao-Kui’, ‘Wen-Yang’, ‘Yuan Liang’] 
const yScale = d3.scaleBand() .domain(data.map(d => d.name)) .range([0, innerHeight]) 

• scale.padding(0.1)：设置条带的间距占各自区域的比重
• scale.bandwidth():返回条带的长度。

坐标轴

• 定义坐标轴（获得结果仍是函数）：
  • const yAxis = d3.axisLeft(yScale);
  • const xAxis = d3.axisBottom(xScale);
  • axisLeft：左侧坐标轴。
  • axisBottom：底侧坐标轴。
  • 坐标轴的刻度对应比例尺的定义域。
  • 坐标轴在画布的绘制对应比例尺的值域。
  • 仅是对坐标轴的定义，还未绘制。
• 绘制坐标轴
  • const yAxisGroup = g.append(‘g’).call(yAxis);
  • const xAxisGroup = g.append(‘g’).call(xAxis);
  • 实际配置后会发现<g>中增添了与坐标轴相关的元素
• 任何坐标轴在初始化之后会默认放置在坐标原点，需要进一步的平移

关于 SELECTION.CALL(…)

call的使用

• 函数的输入为另一个函数。
• 另一个函数以selection本身(即图元)作为输入。
• 另一个函数中会根据函数体的内容修改selection对应的图元。
• 定义一个空白的<g>，D3会帮助我们定义好另一个函数，我们通过 .call(…)让<g>得以在另一个函数中修改。
• const yAxis = d3.axisLeft(yScale);
• const yAxisGroup = g.append(‘g’).call(yAxis);