D3.js教程。建立你的第一个条形图D3.js是一个JavaScript库，使你能够在网络浏览器中创建动态数据可视化。今天，...

6月18日，2021年 - 4分钟阅读

Erin Schaffer

D3.js是一个JavaScript库，使你能够在网络浏览器中创建动态数据可视化。它擅长以可理解和互动的方式将大型数据集可视化。D3.js库因其核心功能，如DOM操作、动态属性和动画，而成为前端开发者的最佳数据可视化工具之一。

今天，我们将向你展示如何使用D3.js建立你的第一个条形图。让我们开始吧!

我们将介绍

项目概述
初始设置
创建你的数据集
设置尺寸和边距
添加SVG元素
收集和格式化数据
添加条形图
接下来的步骤

项目概述

今天，我们要用D3.js建立一个条形图。这是一个很好的项目，因为它可以让你在实践中练习D3.js的数据可视化技能。

柱状图是比较不同组别之间数据的一种有用和有效的方法。它们提高了可读性，使你能够轻松地识别数据中的模式或趋势。

D3.js是数据可视化的好帮手，原因有很多，比如说。

视觉效果：与HTML、CSS和SVG一起工作，因此不需要新的工具
动画：允许你对页面元素进行动画和修改
在所有主要浏览器中支持：在网络上工作，使视觉效果易于分享和发布
灵活：与现有的网络技术配合良好，可以操作DOM的任何部分
可扩展性：能很好地处理大型数据集

初始设置

在创建我们的柱状图之前，我们需要做三件事。

设置文档的头部和主体
设置CSS
加载d3.js库

它们都可以通过以下代码完成。

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.bar { fill: steelblue; }

</style>
<body>
	
<!-- load the d3.js library -->    	
<script src="https://d3js.org/d3.v6.min.js"></script>
<script>

bar-chart.html

在代码的<style> 部分，我们为条形图的颜色设置样式。将样式放在代码的开头是可选的，但早期做起来很方便。

创建你的数据集

在我们开始制作柱状图之前，我们需要数据。在本教程中，我们将使用来自一个虚构的外部CSV文件的一些样本数据，该文件名为amounts.csv 。

该文件由一列姓名和金额组成。

name,amounts
Foo, 33
Rishab, 12
Alexis, 41
Tom, 16
Courtney, 59
Christina, 38
Jack, 21
Mickey, 25
Paul, 30

amounts.csv

我们将使用这些数据制作一个垂直条形图，存储金额的数值。

设置尺寸和边距

让我们来设置我们要用于图表的区域的大小和边距。

// Set graph margins and dimensions
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

现在，我们要确定x和y域的范围。

// Set ranges
var x = d3.scaleBand()
          .range([0, width])
          .padding(0.1);
var y = d3.scaleLinear()
          .range([height, 0]);

附加SVG元素

下面的代码选择网页上的body ，并将一个SVG对象附加到它上面。SVG对象的大小由我们设置的width ，height ，和margin 决定。

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")")

继续学习。

快速学习D3.js，无需刷视频或文档。Educative的基于文本的课程易于浏览，并具有实时编码环境，使学习快速而高效。

D3技巧和窍门。交互式数据可视化

收集和格式化数据

现在是时候把我们的数据加载到我们的脚本正文中了。我们将加载我们的CSV文件，然后循环浏览，以确保所有数据被正确识别。

// Get data
d3.csv("amounts.csv").then(function(data) {

  // Format
  data.forEach(function(d) {
    d.amounts = +d.amounts;
  });

刻度域

在我们添加条形图之前，让我们通过我们的X和Y数据，以确保它被缩放到我们设定的领域。

// Scale the range of the data in the domains
  x.domain(data.map(function(d) { return d.name; }));
  y.domain([0, d3.max(data, function(d) { return d.amounts; })]);

添加条形图

现在是添加条形图的时候了!我们写的代码将创建条形图，并将每个条形图与一个数据集联系起来。

 // Append rectangles for bar chart
  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.name); })
      .attr("width", x.bandwidth())
      .attr("y", function(d) { return y(d.amounts); })
      .attr("height", function(d) { return height - y(d.amounts); });

我们需要做的最后一件事是添加我们的坐标轴，然后我们就可以检查出最终的结果了。

 // Add x axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  // Add y axis
  svg.append("g")
      .call(d3.axisLeft(y));

这就是我们的代码的全貌。

这就是我们完成的柱状图。

widget

作者：Erin Schaffer

加入每月27万名读者的社区。每两个月收到一封免费的电子邮件，内容是Educative的顶级文章和编码技巧的综述。

用一半的时间学习紧缺的技术技能

soc2