D3.js中的数据绑定入门指南

D3.js是一个功能强大的数据可视化库，可让您仅用几行代码即可创建出惊人的图表（例如气泡图 ， 折线图和条形图） 。

通过对JavaScript的初学者的了解，您可以将数组或对象转换为彩色显示。 但是，每个初学者都首先要努力了解数据如何与DOM中的实际元素联系在一起。 这称为“数据绑定”或“数据联接”。 这很重要，因为这是整个过程的第一步！

直观地，您可能会期望一个for()循环，在该循环中，您可以遍历数据中的每个项目并创建一个元素。 像这样：

var data = [{x: 100, y: 100}, {x: 200, y: 200}, {x: 300, y: 300}]

for(var i=0; i< data.length; i++){
    svg.append("circle")
        .attr("cx", function(data) { return data[i].x; })
        .attr("cy", function(data) { return data[i].y; })
        .attr("r", 2.5);
}

但这不是它的工作方式！ 实际上，根本不涉及for()循环。 相反，这是覆盖上面功能的代码块：

var data = [{x: 100, y: 100}, {x: 200, y: 200}, {x: 300, y: 300}]

svg.selectAll("circle")
    .data(data)
    .enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; }) 
    .attr("r", 2.5);

这将在您的SVG画布上添加3个黑色圆圈。 哇 这是因为D3使用声明式的编程风格。 此代码块中隐含了for()循环。

这需要一些时间来适应，所以我将逐行浏览上面的代码块，以便您可以准确了解正在发生的事情。 这和种植菜园一样。 阅读完毕后，您将能够在5到10行中建立任何基本的可视化效果，并开始使用样式（简单的部分）。

如果您需要有关此概念的更多技术说明，请查看D3文档或Scott Murray的数据绑定指南 。

第1步：SVG /土地图

首先，您需要选择要在何处绘制数据可视化效果。 这等效于选择要种植的区域：

>var svg = d3.select("body")
    .append("svg")
    .attr("width", '800px')
    .attr("height", '800px');

这将创建一个800px x 800px的区域（主体），您可以在其中添加元素。 非常简单。

步骤2：selectAll /创建孔

接下来，我们需要一个selectAll（）语句来创建组，稍后将用元素填充该组。 想起来就像在花园里挖洞一样。 D3这样做是为了以后您可以立即更新或删除整个元素集。 这是一个例子：

svg.selectAll("circle")

如果您之前没有添加任何圈子，那么就可以了。 请注意，“圆形”是SVG规范中的基本形状。 如果您之前添加了圈子，则可以在此处使用一个类，例如：

svg.selectAll(".circleClass")

好的，此图片有些误导。 您计划种植的花园部分有无数孔。 没有一种很好的方法可以在合理的空间内将其转换为图像。 重要的是，您要划定要在其中植入数据元素的特定区域。 如果要添加SVG“矩形”元素，则可以在花园的其他部分进行。 在代码的这一点上，尚不清楚您将实际添加多少个元素。 让我们弄清楚！

第3步：数据/种子

这是最重要的部分。 它确定在可视化中将使用哪些数据。 在JavaScript中，您可以以数组或对象的形式传递此数据。 在此步骤中，您将数据“绑定”到在selectAll()指定的DOM元素的类型。 此后，您就可以像通常在JavaScript中一样引用数组或对象中的项目。 我们将通过几个步骤来解决这个问题。 在下面的情况下，数组中包含三个项目，因此我们希望完成后将三个元素添加到DOM中：

var data = [{x: 100, y: 100}, {x: 200, y: 200}, {x: 300, y: 300}]

svg.selectAll("circle")
    .data(data)

这与为花园选择特定类型的种子相同。 每种类型的种子都有某些特征，它们会开花成已知类型的植物。

步骤4：将种子放入孔中

.enter()命令将selectAll语句与数组/对象中的元素数进行匹配，并确定需要创建的元素数。 您不再拥有无限的土地！ 现在，您的地块中的空洞数量与您要种植的植物数量匹配：

svg.selectAll("circle")
    .data(data)
    .enter()

在此示例的代码中，现在有三个孔，并且每个孔中都有一种特定类型的种子（例如，西红柿）。 这也决定了代码将自动执行的迭代次数（再次为3）。

步骤5：附加/植物结构

.append（）命令确定您将使用哪种SVG基本形状 。 尽管selectAll()语句有很多选项，但是在此步骤中只能选择七个形状（或“ g”，但这是更高级的）。 selectAll()命名组， append()命名实际形状：

svg.selectAll("circle")
    .data(data)
    .enter().append("circle")

这类似于补充植物的结构。 您想让植物长成什么样？ 如果要种植西红柿，则需要一个塔。 不同的形状和数据可视化适合于不同的数据集。

关于如何访问数据的简要说明

好了，现在您已经向DOM添加了三个圆形元素。 您选择了一块土地，挖了洞，种了种子，并为植物生长提供了结构。 以下是选择每个圆的属性的方法：

.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })

根据圆的规范，我们知道您可以使用cx和cy确定SVG画布中圆的位置。 在这两种情况下，我们都使用function(d)来访问原始数组中每个项目的属性。 由于您使用了.enter() ，因此您知道此代码块将针对数组中的每个项目运行，共计三次。

d代表数组中的每个项目，例如{x: 100, y: 100} 。 如果它说d,i ，则i将为第一项索引0 ，为第二项索引1 ，依此类推。 当您要求它返回dx ，您只是在查看每个项目的x属性，并将其转换为像素。 在这种情况下，这将是原点右边的100像素。 现在，您只使用普通的JavaScript！ 您可以使用if语句，函数调用等。

结论

在使用D3构建任何出色的东西之前，您需要了解其将数据转换为所选DOM元素的特定方法。 与数据部分相比，样式非常容易。 添加文本与添加形状非常相似，因此一旦您理解了数据部分，您也将理解文本。

尽管您可能会在学习过程的早期就诅咒D3创建者添加如此具有挑战性的概念，但他们有充分的理由这样做。 D3是一个灵活的库，可以几乎自动处理很多挑战。 这种数据绑定结构将使您仅用一到两行代码即可完成复杂的操作。 现在，出去并“哇”您的用户！

---

编者注：本文还有一个交互式版本 。

From: https://www.sitepoint.com/a-beginners-guide-to-data-binding-in-d3-js/