数据可视化：使用D3.js创建交互式图表

大家好，我是欧阳瑞（Rich Own）。今天想和大家聊聊数据可视化这个话题。作为一个全栈开发者，我经常需要将复杂的数据以直观的方式展示给用户。D3.js是一个功能强大的数据可视化库，今天就来分享一下如何使用D3.js创建交互式图表。

为什么选择D3.js？

D3.js（Data-Driven Documents）是一个用于创建动态、交互式数据可视化的JavaScript库。它的优势在于：

特性	说明
灵活性	完全控制DOM和SVG
数据驱动	直接绑定数据到DOM
丰富的API	支持多种图表类型
社区活跃	大量教程和插件

环境准备

html 复制代码

<!-- 在HTML中引入D3.js -->
<script src="https://d3js.org/d3.v7.min.js"></script>

或者使用npm：

bash 复制代码

npm install d3

基础图表：柱状图

创建SVG容器

javascript 复制代码

// 设置画布尺寸
const width = 800;
const height = 400;
const margin = { top: 20, right: 30, bottom: 40, left: 50 };

// 创建SVG容器
const svg = d3.select("#chart")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

// 创建绘图区域
const g = svg.append("g")
  .attr("transform", `translate(${margin.left}, ${margin.top})`);

const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;

准备数据

javascript 复制代码

const data = [
  { category: "A", value: 40 },
  { category: "B", value: 60 },
  { category: "C", value: 30 },
  { category: "D", value: 80 },
  { category: "E", value: 50 }
];

创建比例尺

javascript 复制代码

// X轴比例尺（序数比例尺）
const xScale = d3.scaleBand()
  .domain(data.map(d => d.category))
  .range([0, innerWidth])
  .padding(0.2);

// Y轴比例尺（线性比例尺）
const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .range([innerHeight, 0]);

绘制坐标轴

javascript 复制代码

// X轴
g.append("g")
  .attr("transform", `translate(0, ${innerHeight})`)
  .call(d3.axisBottom(xScale));

// Y轴
g.append("g")
  .call(d3.axisLeft(yScale));

绘制柱状图

javascript 复制代码

// 绑定数据并创建矩形
g.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", d => xScale(d.category))
  .attr("y", d => yScale(d.value))
  .attr("width", xScale.bandwidth())
  .attr("height", d => innerHeight - yScale(d.value))
  .attr("fill", "#00ffff")
  .attr("opacity", 0.7);

交互式图表

添加悬停效果

javascript 复制代码

g.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", d => xScale(d.category))
  .attr("y", d => yScale(d.value))
  .attr("width", xScale.bandwidth())
  .attr("height", d => innerHeight - yScale(d.value))
  .attr("fill", "#00ffff")
  .attr("opacity", 0.7)
  .on("mouseenter", function(event, d) {
    d3.select(this)
      .transition()
      .duration(200)
      .attr("fill", "#ff00ff")
      .attr("opacity", 1);
  })
  .on("mouseleave", function(event, d) {
    d3.select(this)
      .transition()
      .duration(200)
      .attr("fill", "#00ffff")
      .attr("opacity", 0.7);
  });

添加工具提示

javascript 复制代码

// 创建工具提示
const tooltip = d3.select("#chart")
  .append("div")
  .attr("class", "tooltip")
  .style("opacity", 0)
  .style("position", "absolute")
  .style("background", "black")
  .style("color", "#00ffff")
  .style("padding", "8px")
  .style("border-radius", "4px");

// 绑定工具提示事件
g.selectAll("rect")
  .on("mouseenter", function(event, d) {
    tooltip.transition()
      .duration(200)
      .style("opacity", 0.9);
    
    tooltip.html(`类别: ${d.category}<br/>值: ${d.value}`)
      .style("left", (event.pageX + 10) + "px")
      .style("top", (event.pageY - 28) + "px");
  })
  .on("mouseleave", function() {
    tooltip.transition()
      .duration(200)
      .style("opacity", 0);
  });

折线图

准备时序数据

javascript 复制代码

const timeData = [
  { date: "2023-01-01", value: 30 },
  { date: "2023-01-02", value: 45 },
  { date: "2023-01-03", value: 35 },
  { date: "2023-01-04", value: 50 },
  { date: "2023-01-05", value: 42 },
  { date: "2023-01-06", value: 60 },
  { date: "2023-01-07", value: 55 }
];

创建时间比例尺

javascript 复制代码

// 解析日期
const parseDate = d3.timeParse("%Y-%m-%d");
timeData.forEach(d => {
  d.date = parseDate(d.date);
});

// X轴时间比例尺
const xTimeScale = d3.scaleTime()
  .domain(d3.extent(timeData, d => d.date))
  .range([0, innerWidth]);

// Y轴线性比例尺
const yTimeScale = d3.scaleLinear()
  .domain([0, d3.max(timeData, d => d.value)])
  .range([innerHeight, 0]);

创建折线生成器

javascript 复制代码

const line = d3.line()
  .x(d => xTimeScale(d.date))
  .y(d => yTimeScale(d.value))
  .curve(d3.curveMonotoneX); // 平滑曲线

绘制折线

javascript 复制代码

// 绘制折线
g.append("path")
  .datum(timeData)
  .attr("fill", "none")
  .attr("stroke", "#ff00ff")
  .attr("stroke-width", 2)
  .attr("d", line);

// 绘制数据点
g.selectAll("circle")
  .data(timeData)
  .enter()
  .append("circle")
  .attr("cx", d => xTimeScale(d.date))
  .attr("cy", d => yTimeScale(d.value))
  .attr("r", 5)
  .attr("fill", "#00ffff");

饼图

javascript 复制代码

// 数据
const pieData = [
  { category: "A", value: 30 },
  { category: "B", value: 20 },
  { category: "C", value: 50 }
];

// 创建SVG
const pieSvg = d3.select("#pie-chart")
  .append("svg")
  .attr("width", 400)
  .attr("height", 400);

const pieG = pieSvg.append("g")
  .attr("transform", "translate(200, 200)");

// 创建饼图生成器
const pie = d3.pie()
  .value(d => d.value);

// 创建弧形生成器
const arc = d3.arc()
  .innerRadius(0)
  .outerRadius(150);

// 颜色比例尺
const color = d3.scaleOrdinal()
  .domain(pieData.map(d => d.category))
  .range(["#00ffff", "#ff00ff", "#ffff00"]);

// 绘制饼图
pieG.selectAll("path")
  .data(pie(pieData))
  .enter()
  .append("path")
  .attr("d", arc)
  .attr("fill", d => color(d.data.category))
  .attr("opacity", 0.8)
  .on("mouseenter", function(event, d) {
    d3.select(this)
      .transition()
      .duration(200)
      .attr("opacity", 1);
  })
  .on("mouseleave", function(event, d) {
    d3.select(this)
      .transition()
      .duration(200)
      .attr("opacity", 0.8);
  });

// 添加标签
pieG.selectAll("text")
  .data(pie(pieData))
  .enter()
  .append("text")
  .attr("transform", d => `translate(${arc.centroid(d)})`)
  .attr("text-anchor", "middle")
  .attr("fill", "white")
  .text(d => d.data.category);

力导向图

javascript 复制代码

// 创建力导向图
const forceData = {
  nodes: [
    { id: "A", group: 1 },
    { id: "B", group: 1 },
    { id: "C", group: 2 },
    { id: "D", group: 2 },
    { id: "E", group: 3 }
  ],
  links: [
    { source: "A", target: "B" },
    { source: "B", target: "C" },
    { source: "C", target: "D" },
    { source: "D", target: "E" },
    { source: "E", target: "A" }
  ]
};

const forceSvg = d3.select("#force-chart")
  .append("svg")
  .attr("width", 600)
  .attr("height", 400);

const forceSimulation = d3.forceSimulation(forceData.nodes)
  .force("link", d3.forceLink(forceData.links).id(d => d.id))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(300, 200));

// 绘制连线
const link = forceSvg.append("g")
  .selectAll("line")
  .data(forceData.links)
  .enter()
  .append("line")
  .attr("stroke", "#00ffff")
  .attr("stroke-opacity", 0.5);

// 绘制节点
const node = forceSvg.append("g")
  .selectAll("circle")
  .data(forceData.nodes)
  .enter()
  .append("circle")
  .attr("r", 10)
  .attr("fill", "#ff00ff")
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

// 更新位置
forceSimulation.on("tick", () => {
  link
    .attr("x1", d => d.source.x)
    .attr("y1", d => d.source.y)
    .attr("x2", d => d.target.x)
    .attr("y2", d => d.target.y);

  node
    .attr("cx", d => d.x)
    .attr("cy", d => d.y);
});

function dragstarted(event, d) {
  if (!event.active) forceSimulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(event, d) {
  d.fx = event.x;
  d.fy = event.y;
}

function dragended(event, d) {
  if (!event.active) forceSimulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

实战案例：加密货币价格图表

javascript 复制代码

// 获取加密货币数据
async function fetchCryptoData() {
  const response = await fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin,ethereum,solana&order=market_cap_desc&per_page=3&page=1&sparkline=false");
  const data = await response.json();
  return data;
}

// 创建加密货币价格图表
async function createCryptoChart() {
  const data = await fetchCryptoData();
  
  const width = 600;
  const height = 400;
  const margin = { top: 20, right: 20, bottom: 40, left: 60 };
  
  const svg = d3.select("#crypto-chart")
    .append("svg")
    .attr("width", width)
    .attr("height", height);
  
  const g = svg.append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`);
  
  const innerWidth = width - margin.left - margin.right;
  const innerHeight = height - margin.top - margin.bottom;
  
  const xScale = d3.scaleBand()
    .domain(data.map(d => d.name))
    .range([0, innerWidth])
    .padding(0.3);
  
  const yScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.current_price)])
    .range([innerHeight, 0]);
  
  g.append("g")
    .attr("transform", `translate(0, ${innerHeight})`)
    .call(d3.axisBottom(xScale));
  
  g.append("g")
    .call(d3.axisLeft(yScale).tickFormat(d => "$" + d));
  
  const colors = ["#f7931a", "#627eea", "#00ffa3"];
  
  g.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", d => xScale(d.name))
    .attr("y", d => yScale(d.current_price))
    .attr("width", xScale.bandwidth())
    .attr("height", d => innerHeight - yScale(d.current_price))
    .attr("fill", (d, i) => colors[i % colors.length])
    .attr("opacity", 0.8)
    .on("mouseenter", function(event, d) {
      d3.select(this)
        .transition()
        .duration(200)
        .attr("opacity", 1);
    })
    .on("mouseleave", function(event, d) {
      d3.select(this)
        .transition()
        .duration(200)
        .attr("opacity", 0.8);
    });
}

createCryptoChart();

总结

D3.js是一个功能强大的数据可视化工具，掌握它可以让你创建出各种精美的交互式图表。从简单的柱状图到复杂的力导向图，D3.js都能胜任。

我的鬃狮蜥Hash对数据可视化也很感兴趣------它喜欢盯着屏幕上闪烁的图表，仿佛在分析数据趋势。也许有一天，我会为它创建一个"蟋蟀价格指数"的实时图表。

如果你有数据可视化方面的问题，欢迎留言交流！我是欧阳瑞，极客之路，永无止境！

技术栈：D3.js · SVG · JavaScript · 数据可视化