D3.js 教程

D3.js 是一个强大的 JavaScript 库，用于在网页上创建交互式数据可视化。以下是一些基础教程，帮助您开始使用 D3.js。

快速开始

1. 安装 D3.js

   • 您可以通过 CDN 链接快速引入 D3.js 到您的项目中。

   <script src="https://d3js.org/d3.v6.min.js"></script>
   

2. 创建基础图表

   • 使用 D3.js 创建一个简单的柱状图。

   const data = [30, 80, 45, 60];
   const svg = d3.select("svg");
   const rect = svg.selectAll("rect")
     .data(data)
     .enter().append("rect")
     .attr("width", d => d * 10)
     .attr("height", 10)
     .attr("x", (d, i) => i * 15)
     .attr("y", 50 - d * 10);
   

3. 交互式图表

   • 您可以通过添加交互功能来增强图表。

   rect.on("mouseover", function(event, d) {
     d3.select(this).attr("fill", "red");
   })
   .on("mouseout", function(event, d) {
     d3.select(this).attr("fill", "blue");
   });
   

扩展阅读

• D3.js 官方文档

图片示例

柱状图

交互效果