d3.js 柱状图新手教程：从数据到可视化

2023-10-13 09:12:07

了解 d3.js

d3.js 是一个开源的 JavaScript 库，用于创建可视化。它具有许多优点，包括：

强大而灵活：d3.js 可以用于创建各种类型的可视化，从简单的条形图和饼图到复杂的网络图和地理地图。
数据驱动：d3.js 将数据与可视化紧密结合，使您可以轻松地更新数据并查看结果的变化。
可扩展：d3.js 非常模块化，可以根据您的需要轻松扩展。您可以在现有代码的基础上构建或创建自己的自定义组件。

设置 d3.js

要使用 d3.js，您需要将其添加到您的 HTML 页面。您可以从 d3js.org 下载最新版本或使用 CDN（内容分发网络）将其包含在您的页面中。

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

创建 SVG 元素

SVG（可缩放矢量图形）是一种用于创建可视化的矢量图形格式。它是 d3.js 中使用最常见的图形格式，因为它可以轻松缩放和旋转。要创建 SVG 元素，您可以使用以下代码：

<svg width="500" height="300"></svg>

加载数据

d3.js 可以从各种来源加载数据，包括 CSV 文件、JSON 文件和数组。要加载数据，您可以使用以下代码：

d3.csv("data.csv").then(function(data) {
  // 使用数据创建可视化
});

数据绑定

数据绑定是将数据与可视元素相关联的过程。这使您可以轻松地更新数据并查看结果的变化。要执行数据绑定，您可以使用以下代码：

var bars = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect");

创建柱状图

现在，您可以使用数据绑定创建柱状图。以下代码将为每个数据点创建一个矩形：

var bars = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d, i) { return i * 20; })
  .attr("y", function(d) { return height - d.value * 10; })
  .attr("width", 18)
  .attr("height", function(d) { return d.value * 10; });