D3.js 基础知识

软件开发和工程领域最热门的话题之一是数据科学和分析。即使您自己不处理数字，您在开发 Web 应用程序方面的功能也可能会受到影响（如果还没有受到影响的话）。作为前端 Web 开发人员，您可能需要提供的一项技能是设计可视化。不，我并不是想把你变成平面设计师。本指南将介绍 D3，这是一个用于在浏览器中创建可视化的 JavaScript 库。

设置开发环境

为了方便起见，本指南使用在线开发环境CodeSandbox。 CodeSandbox 可免费使用，只需 Github 帐户登录即可。指南中的每个示例都包含沙盒链接，以便您无需安装任何东西即可克隆和试验它们。

D3 和文档对象模型

如果您曾经进行过前端 Web 开发，那么您就会知道文档对象模型 (DOM) 有多重要。在 D3 中，DOM 也发挥着重要作用。主要对象 D3 名为d3。它有点像 jQuery 中的美元符号。d3对象有一个select方法，它接受字符串 CSS 选择器。因此，如果您有以下 HTML：

      <div id="green">I am green</div>

以下 D3 语句将选择它。

      d3.select('div#green').style('color', 'green');
    

请注意，您可以对select的返回值调用style方法，该返回值是对与选择器匹配的元素的引用。这种链接行为再次类似于 jQuery。

结果如下：

CodeSandbox上的实例链接

使用 SVG

但 D3 是用于在可视化中创建图形的！您可能熟悉的另一个 Web 标准 SVG（可缩放矢量图形）增加了在浏览器中创建图形对象的功能。与 DOM 一样，SVG 也有一个对象模型。D3 依靠 SVG 在可视化中创建图形。所有操作都发生在svg标记内：

      <svg height="480" width="640" />

这只是为 SVG 图形创建一个尺寸为 640 x 480 像素的容器。当使用 D3 选择它时，真正的力量就显现出来了。然后您可以开始添加基本形状，例如圆形：

      d3.select('svg')
  .append('circle');
    

这不会显示圆，因为它没有坐标或半径。这些属性与attr方法链接在一起：

      d3.select('svg')
  .append('circle')
  .attr('cx', 320)
  .attr('cy', 240)
  .attr('r', 100)
  .attr('fill', red)
    

此代码将把圆圈放置在svg元素的中心，赋予其半径 100 像素，并用红色填充。它将生成类似于以下内容的 SVG 代码：

      <circle cx="320" cy="240" r="100" fill="red" />

结果如下：

CodeSandbox上的实例链接

加载 JSON 数据

事情从这里开始变得有趣起来。很多时候，可视化的目的是讲述数据的故事。D3 具有灵活而强大的机制，可以加载和处理多种格式的数据。此示例将使用 JSON。在沙箱中，您会在数据目录中找到 sales.json 文件。以下是代码片段：

      
  {
    "conference_name": "Joy of JavaScript"

这些数据来自我经常使用的演示应用程序 Conference Barrel，这是一款会议管理应用程序。sales.json 文件包含有关会议门票销售的数据。要将此数据加载到 D3，请使用json方法：

      d3.json('../data/sales.json');

对于其他文件类型（例如 CSV），还有其他方法。

此代码返回一个 promise 对象，因此您可以链接then方法并访问数据：

      d3.json('../data/sales.json')
  .then(data => {
    data.forEach((el, idx) => document.body.appendChild(generate_div(el.conference_name)));
  });
    

data变量是从 sales.json 文件解析出来的 JSON 对象。由于它是一个数组，因此可以使用 forEach 方法对其进行迭代，并在页面中显示会议名称。

结果如下：

CodeSandbox上的实例链接

数据绑定

这是关键所在。您知道如何使用 DOM、如何使用 SVG 以及如何加载数据。现在是时候将所有内容整合在一起并进行可视化了。此示例将是一个简单的条形图，显示每个会议的门票销售情况。条形将是 SVG矩形元素。每个矩形将具有x和y位置、高度和宽度以及填充颜色的属性。其代码与您之前看到的圆形元素类似。诀窍是让矩形表示数据。以下是代码：

      d3.json('../data/sales.json')
  .then(data => {
    var svg = d3.select('svg');
    svg
      .selectAll('rect')
      .data(data)
      .enter()
      .append('rect');
    

这可能看起来有点奇怪，但它是 D3 的常用用法。您已经看到了selectAll方法之前的所有内容。它将按照名称所示执行操作，并选择 SVG 容器中任何现有的rect元素。在本例中没有，因此它将返回一个空集合。如果存在现有的rect元素，则在调用data方法时它们将与数据中的值相关联。data 中任何剩余的值都将传递给enter，后者会为每个值调用一次append。但由于没有rect元素，因此这与为data中的每个值调用一次append相同。

但同样，就像圆形一样，您必须添加属性才能显示任何图形。由于这是一个条形图，矩形的宽度将与数据中的tickets_sold键成比例。要获取此值，请将函数而不是值作为第二个参数传递给attr。它将接受来自数据的当前值和该值的索引。获取tickets_sold键并将其用于width。y坐标将基于索引。使用以下代码创建条形图的其余部分：

      d3.json('../data/sales.json')
  .then(data => {
    // omitted
    .append('rect')
    .attr('x', 0)
    .attr('y', (val, idx) => idx * BAR_SPACING)
    .attr('width', (val, idx) => val.tickets_sold)
    .attr('height', BAR_HEIGHT)
    .attr('fill', green);
    

D3 显示的内容如下：

CodeSandbox上的实例链接

添加文本

尽管可视化应该是数据的图形表示，但添加一些数字以强调效果也无妨。使用 D3 可以轻松添加文本。文本将放入添加的文本元素中，就像添加矩形元素一样：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

D3.js 基础知识