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

数据可视化使用D3.js创建交互式图表大家好我是欧阳瑞Rich Own。今天想和大家聊聊数据可视化这个话题。作为一个全栈开发者我经常需要将复杂的数据以直观的方式展示给用户。D3.js是一个功能强大的数据可视化库今天就来分享一下如何使用D3.js创建交互式图表。为什么选择D3.jsD3.jsData-Driven Documents是一个用于创建动态、交互式数据可视化的JavaScript库。它的优势在于特性说明灵活性完全控制DOM和SVG数据驱动直接绑定数据到DOM丰富的API支持多种图表类型社区活跃大量教程和插件环境准备!-- 在HTML中引入D3.js -- script srchttps://d3js.org/d3.v7.min.js/script或者使用npmnpm install d3基础图表柱状图创建SVG容器// 设置画布尺寸 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;准备数据const data [ { category: A, value: 40 }, { category: B, value: 60 }, { category: C, value: 30 }, { category: D, value: 80 }, { category: E, value: 50 } ];创建比例尺// 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]);绘制坐标轴// X轴 g.append(g) .attr(transform, translate(0, ${innerHeight})) .call(d3.axisBottom(xScale)); // Y轴 g.append(g) .call(d3.axisLeft(yScale));绘制柱状图// 绑定数据并创建矩形 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);交互式图表添加悬停效果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); });添加工具提示// 创建工具提示 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); });折线图准备时序数据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 } ];创建时间比例尺// 解析日期 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]);创建折线生成器const line d3.line() .x(d xTimeScale(d.date)) .y(d yTimeScale(d.value)) .curve(d3.curveMonotoneX); // 平滑曲线绘制折线// 绘制折线 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);饼图// 数据 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);力导向图// 创建力导向图 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; }实战案例加密货币价格图表// 获取加密货币数据 async function fetchCryptoData() { const response await fetch(https://api.coingecko.com/api/v3/coins/markets?vs_currencyusdidsbitcoin,ethereum,solanaordermarket_cap_descper_page3page1sparklinefalse); 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 · 数据可视化