guides/d3_js_web_visualization

D3.js 是一个强大的 JavaScript 库，用于在网页上创建交互式数据可视化。下面将介绍如何使用 D3.js 进行 Web 可视化。

基础概念

• SVG (Scalable Vector Graphics): D3.js 主要用于操作 SVG 元素，SVG 是一种基于可扩展标记语言的矢量图形。
• DOM (Document Object Model): D3.js 可以操作 DOM 元素，从而实现动态的交互式可视化。

示例

以下是一个简单的 D3.js 示例，用于绘制一个柱状图：

d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 300);

d3.select("svg").selectAll("rect")
    .data([30, 80, 45, 60])
    .enter().append("rect")
    .attr("width", function(d) { return d; })
    .attr("height", 20)
    .attr("y", function(d, i) { return i * 30; });

资源

• D3.js 官方文档

D3.js 示例