简介

• 用于定制数据可视化
• 创建具有无可比拟灵活性的自定义动态可视化

安装

yarn add d3

使用

CDN

d3.v7.js

NPM

import * as d3 from "d3";
// or
import { select, selectAll } from "d3";

DOM 选择

• d3.select()
• d3.selectAll()

选择 DOM 并设置属性

d3.select("#d3_p").style("color", "blue");

d3.selectAll(".d3_p").style("color", "blue");

数据驱动

let fruits = ['Apple', 'Orange', 'Mango']

d3.selectAll(".d3_fruit").data(fruits).text((d) => d)

// html

<p class="d3_fruit"></p>

join 函数

绑定 data 数据到空的选择器上

select 在线实例

import { useEffect, useRef } from 'react';
import { select, selectAll } from 'd3';

function App() {
  let d3Dom = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    console.log(d3Dom.current!.id, '..');
    let data = ['Apple', 'Orange', 'Mango'];
    select(d3Dom.current)
      .selectAll('div')
      .data(data)
      .join('div')
      .text((e: string) => e);
    // selectAll('p')
    //   .selectAll('div')
    //   .data(data)
    //   .join('div')
    //   .text((e: string) => e);
  });
  return (
    <>
      <p>select , selectAll</p>
      <div id="d3" ref={d3Dom}></div>
    </>
  );
}

export default App;

数据加载方式

支持数据格式： :json 、csv 、xml、tsv、text加载数据函数： ：d3.json(url) 、d3.csv(url) 、d3.xml(url)、d3.tsv(url)、d3.text(url)

import { useEffect, useRef } from "react";
import { select, json } from "d3";

function LoadData() {
  const d3Dom = useRef<HTMLDivElement | null>(null);
  const loadData = async () => {
    const data = await json<string>("./data.json");
    select(d3Dom.current)
      .selectAll("div")
      .data(data!)
      .join("div")
      .text((e: string) => e);
  };
  useEffect(() => {
    loadData();
  });
  return (
    <>
      <p>LoadData</p>
      <div id="d3_1" ref={d3Dom}></div>
    </>
  );
}

export default LoadData;

Scale

将抽象数据的维度映射为可视化表示, scale 有很多种类, 用于限定 x、y 轴的范围（domain 代表 x，y 轴的范围，range 代表数据的范围）

• Linear scales ：- 用于定量数据
• Time scales ：- 用于时间序列数据
• Pow scales ：- 用于定量数据（范围很广）
• Log scales ：- 用于定量数据（范围很广）
• Symlog scales ：- 用于定量数据（范围很广）
• Ordinal scales ：- 用于分类或序数数据
• Band scales ：- 用于作为位置编码的分类或有序数据
• Point scales ：- 用于作为位置编码的分类或有序数据
• Sequential scales ：- 用于将定量数据作为顺序颜色编码
• Diverging scales ：- 将定量数据作为发散颜色编码
• Quantile scales ：- 用于作为离散编码的定量数据
• Quantize scales ：- 将定量数据作为离散编码
• Threshold scales ：- 将定量数据作为离散编码

语法

// scaleLinear(domain, range)

d3.scaleLinear([0, 100], ["red", "blue"]);

d3.scaleLinear().domain([10, 500]).range([2000000, 16000000]);