vue.js 数据绑定缓冲

is a powerful data visualization library that allows you to create amazing charts — such as , — with just a few lines of code.

是一个功能强大的数据可视化库，使您仅需几行代码即可创建令人惊叹的图表(例如 ， 。

With a beginner’s understanding of JavaScript, you can convert your array or object into a colorful display. However, every single beginner struggles at first to understand how data is tied to actual elements in the DOM. This is known as “data binding” or “data joins”. It’s a huge deal, because it’s the first step of the entire process!

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

Intuitively, you might expect a for() loop, where you loop over every item in your data and create an element. Like this:

直观地，您可能会期望一个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);}

But this isn’t how it works! In fact, there are no for() loops involved at all. Instead, here’s the code block that would cover the functionality above:

但这不是它的工作方式！ 实际上，根本不涉及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);

This would add 3 black circles to your SVG canvas. Whoa. This is because D3 uses a style of programming. The for() loop is covered implicitly in this code block.

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

This takes some getting used to, so I’m going to go through the code block above line-by-line so you can understand exactly what’s going on. It’s the same idea as planting a vegetable garden. When you’re done reading, you’ll be able to build any basic visualization in 5 to 10 lines and get started with styling (the easy part).

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

If you’re looking for a more technical explanation of this concept, check out the or Scott Murray’s .

如果您需要有关此概念的更多技术说明，请查看或Scott Murray的 。

步骤1：SVG /土地图 (Step 1: SVG/ The Plot of Land)

First, you need to choose where you want to draw the data visualization. This is equivalent to choosing the area you want to plant:

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

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

This creates an 800px by 800px area of land — the body — into which you can add your elements. Pretty straightforward.

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

步骤2：selectAll /创建Kong (Step 2: selectAll/ Creating the Holes)

Next, we need a selectAll() statement to create the group that we’ll later fill with elements. Think of this like digging the holes in your garden. D3 does this so that you can later either update or remove the entire set of elements at once. Here’s an example:

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

svg.selectAll("circle")

If you haven’t previously added any circles, this will work just fine. Please note that “circle” is a basic shape from the . If you’ve previously added circles, you can just use a class here, like:

如果您之前未添加任何圈子，那么就可以正常工作。 请注意，“圆形”是的基本形状。 如果您之前添加了圈子，则可以在此处使用一个类，例如：

svg.selectAll(".circleClass")

Okay, this image is slightly misleading. There’s an infinite number of holes within the part of the garden you plan on planting. There wasn’t a great way to turn that into an image in a reasonable amount of space. The important part is that you are delineating a certain area in which you’ll be planting data elements. If you wanted to add SVG “rect” elements, you’d do that in a different part of the garden. At this point in the code, it’s unclear how many elements you’ll actually add. Let’s figure that out!

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

第3步：数据/种子 (Step 3: Data/ The seeds)

This is the most important part. It determines what data will be used in the visualization. In JavaScript, you can pass this data in the form of an array or object. In this step, you “bind” your data to the type of DOM element you specified in selectAll(). After this point, you can reference items in the array or object just like you always do in JavaScript. We’ll get to that in a couple of steps. In the case below, there are three items in the array, so we expect that three elements will be added to the DOM when we’re done:

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

var data = [{x: 100, y: 100}, {x: 200, y: 200}, {x: 300, y: 300}]svg.selectAll("circle")    .data(data)

This is the same as selecting a specific type of seed for the garden. Each type of seed has certain characteristics, and will blossom into a known type of plant.

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

步骤4：将种子放入Kong中 (Step 4: Enter/ Put Seeds in Holes)

The .enter() command matches the selectAll statement with the number of elements in the array/object, and determines the number of elements that will need to be created. You no longer have an infinite plot of land! The number of holes in your plot of land now matches the number of plants you want to grow:

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

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

In the code for this example, there are now three holes, and seeds of one specific type in each of those holes (tomatoes, for example). This also determines the number of iterations your code will automatically go through (3, again).

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

步骤5：附加/植物结构 (Step 5: Append/ The Structure of Your Plants)

The .append() command determines which of the you’ll use. Although you have many options for the selectAll() statement, there are only seven shapes to choose from in this step (or a “g”, but that’s more advanced). selectAll() names the group, append() names the actual shape:

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

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

This is similar to the structure that compliments your plant. What do you want your plant to grow into? If you want to grow tomatoes, you’ll need a tower. Different shapes and data visualizations are suited for different data sets.

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

关于如何访问数据的简要说明 (Brief Explanation on How to Access the Data)

Alright, now you’ve added three circle elements to the DOM. You chose your plot of land, dug the holes, planted the seeds and provided the structure for the plants to grow. Here’s how to choose the attributes of each circle:

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

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

From the circle specification, we know that you can determine a circle’s position within the SVG canvas with cx and cy. In both cases, we’re using function(d) to access the properties of each item in the original array. Since you used .enter(), you know this code block will run for each item in the array, a total of three times.

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

The d stands for each item in the array, like {x: 100, y: 100}. If it said d,i, the i would be index 0 for the first item, 1 for the second item and so on. And when you ask it to return d.x, you’re just looking at the x property of each item, and turning that into pixels. That would be 100 pixels right of the origin in this case. Now you’re just using normal JavaScript! You can use if statements, function calls and anything else.

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

结论 (Conclusion)

Before you can build anything cool with D3, you need to understand its specific method for turning data into DOM elements of your choice. Styling is super easy compared to the data part. Adding text is very similar to adding shapes, so once you understand the data part, you understand text as well.

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

Although you may be cursing the D3 creators for adding such a challenging concept this early in the learning process, they had good reason to do it this way. D3 is a flexible library that can handle so many challenges nearly automatically. This data binding structure will allow you to complete complex actions in just one to two lines of code. Now go out and “wow” your users!

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

Editor’s note: there’s also an of this article.

编者注：本文还有一个 。

翻译自:

vue.js 数据绑定缓冲