ai_teaching_tools/d3_js_tutorial

D3.js 是一个强大的JavaScript库，用于创建交互式数据可视化。在这个教程中，我们将学习如何使用D3.js进行数据可视化。

基础概念

D3.js 的核心是数据驱动文档（Data-Driven Document, D3）的概念，它允许你使用数据来操作DOM。

• SVG：D3.js 主要使用SVG（可缩放矢量图形）来绘制图形。
• 数据绑定：将数据绑定到DOM元素上，以便于数据更新时自动更新视图。

实例

下面是一个简单的D3.js示例，它将创建一个柱状图。

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

// 准备数据
const data = [30, 50, 70, 80, 90];

// 创建SVG画布
const svg = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 300);

// 创建比例尺
const xScale = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([0, 500]);

// 创建Y轴
const yAxis = d3.axisLeft(d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([300, 0]));

svg.append("g")
    .attr("transform", "translate(50, 0)")
    .call(yAxis);

// 绘制柱状图
svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", (d, i) => xScale(i))
    .attr("y", d => 300 - xScale(d))
    .attr("width", (d, i) => xScale(1) - xScale(0))
    .attr("height", d => xScale(d));

更多资源

想要了解更多关于D3.js的信息，请访问我们的 D3.js 教程 页面。

图片

柱状图示例