【译】D3入门

• 原文标题：【Getting Started with D3】
• 原文链接： thinkingonthinking.com/Getting-Sta…

译注：本文使用D3的v3版本，当前最新版本v5

可视化是理解想法和玩转数据的好工具。来自 Ideo 的 Tim Brown 在这篇文章中写道

视觉思维不仅限于插图。它可以采取多种形式。思维导图、二乘二矩阵和其他视觉框架可以帮助以有价值的方式探索和描述想法，这些想法只需要几条直线和一些想象力。

特别是对于图形中的数据可视化，D3 可能会有所帮助。 D3 代表“数据驱动文档”，是 HTML 和 SVG 的JavaScript可视化库。这篇文章是一个简短的概述，可以帮助您入门。

加载 D3

加载 D3 的最简单方法是从CDN加载脚本，例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>
复制代码

或者，您可以从 github仓库 或项目网站 复制库。

重要说明 ：通过添加带有对 D3.js 库的引用的脚本标记，可以获得要使用的 "d3" 对象。有了这个，您就拥有了一个在浏览器中呈现数据的工具。

d3 对象

d3对象有点类似于 jQuery 中的 “$” 对象。例如，您可以 “select” 类似 circle 标签这样的DOM节点。也可以使用 “append” 构建新节点。

d3对象还可以帮助您设置用于渲染图形的画布。你需要一个基于 “svg” 的画布。添加此 “svg” 是构建图形的第一步。因此，让我们定义以下构造：

var vis = d3.select("#graph")
            .append("svg");
复制代码

这将选择ID为 “#graph” 的DOM节点。然后，您可以使用以下方法添加图表的宽度和高度等属性：

var w = 900,
    h = 400;
vis.attr("width", w)
   .attr("height", h);
复制代码

你还可以添加文字

vis.text("The Graph")
复制代码

如果你在 jQuery 中使用选择器，那么选择和添加DOM节点应该看起来很熟悉。

放置节点

但是， D3 与 jQuery 不同，因为它允许根据 “数据” “布局” 图形结构。这意味着，选择的DOM节点提供了许多不同的功能，而不是 jQuery 的相同选择。

一旦选择了DOM节点，就可以将数据 “连接” 到DOM节点！这是通过 data() 命令完成的。数据到节点的映射可能会感觉有点神奇，因为这会基于声明性语法添加关系。如果你最终有些困惑（就像我一样），你可以在这里阅读一些额外的解释

要进行第一次映射，我们首先定义节点：

var nodes = [{x: 30, y: 50},
             {x: 50, y: 80},
             {x: 90, y: 120}]
复制代码

因为我们从一个新的画布开始，所有节点都是新的，我们可以用 “selectAll” - “data” - “enter” 来映射它们：

vis.selectAll("circle .nodes")
   .data(nodes)
   .enter()
   .append("svg:circle")
   .attr("class", "nodes")
   .attr("cx", function(d) { return d.x; })
   .attr("cy", function(d) { return d.y; })
复制代码

顺序是这样的：您选择一组DOM节点（可能存在或不存在）。然后，您将这些节点与数据连接起来，对于每个新的DOM节点，您可以指定标记名称（ circle ）并添加一个类和更多属性。

要实际查看圆圈，您必须设置 fill 属性：

vis.selectAll("circle .nodes")
   .data(nodes)
   .enter()
   .append("svg:circle")
   .attr("class", "nodes")
   .attr("cx", function(d) { return d.x; })
   .attr("cy", function(d) { return d.y; })
   .attr("r", "10px")
   .attr("fill", "black") 
复制代码

这个结果应该类似于：

由于圆圈已绘制好了，您现在可以添加和删除数据，图表将自动更新：尝试此codepen

连接点

图表基于节点和 链接 。要渲染这些链接，您需要在圆圈之间添加线条。由于您具有圆的坐标，因此可以按如下方式添加行：

var links = [
  {source: nodes[0], target: nodes[1]},
  {source: nodes[2], target: nodes[1]}
]
复制代码

您可以使用线条 SVG 形状来连接点：

vis.selectAll(".line")
   .data(links)
   .enter()
   .append("line")
   .attr("class", "line")
   .attr("x1", function(d) { return d.source.x })
   .attr("y1", function(d) { return d.source.y })
   .attr("x2", function(d) { return d.target.x })
   .attr("y2", function(d) { return d.target.y })
   .style("stroke", "rgb(6,120,155)");
复制代码

我们有将坐标转换为线属性的功能。结果可以在这个codepen 中看到。您可以添加和删除数据，并查看图表是如何变化的。

进一步探索

对于小例子，使用 nodes 和 edges 手动设置图形可能会很有趣。但是，如果您经常需要设置图形，或者 nodes 和 edges 数量增加，也可以使用算法设置图形。这个时候力布局 就非常有用了。

有了这个，你可以像这个例子 一样设置一个图形：

D3 支持力布局算法，这里 是一个很好的起点。另一种选择可能是使用 D3插件 ，例如 图形插件 。

如果你有在图表上使用 D3 的不同方法的经验？请在hackernews留下反馈。