函数（d）和函数（d，i）之间的区别？ [英] difference between function(d) and function(d,i)?

问题描述

每个 D3js初学者必须经历这个想法，我对此非常肯定。

Every D3js beginner must be going through this thought, I am pretty much sure about it.

我一直在做这件事现在几个小时!!!!但我不知道如何使用它们和它们之间的差异是什么？

I have been around this thing for few hours now!!!!But I don't know how to use it and what is the difference between them?

function(d){return d}

function(d,i){return d and some more custom code}

例如--->

var data = [4,8,15,16,23 ，42];

var data = [4, 8, 15, 16, 23, 42];

    Function(d):::::

    chart.selectAll("div")
         .data(data)
         .enter().append("div")
         .style("width", function(d) { return d * 10 + "px"; })
         .text(function(d) { return d; });

    ------------------------------------------------------------------------------------

 Function(d*i):::::

    chart.selectAll("rect")
        .data(data)
        .enter().append("rect")
        .attr("y", function(d, i) { return i * 20; })
        .attr("width", x)
        .attr("height", 20);

推荐答案

你的例子是一个很好的插画家之间的区别两个。

Your example is a good illustrator of the difference between the two.

在第一个示例中，仅使用 d 。 d 表示与给定选择关联的数据。在这种情况下，将创建一个选定的 div 元素的数组，一个元素用于 data 数组中的每个元素：

In the first example, only d is used. d represents the data associated with a given selection. In this case, an array of selected div elements is created, one for each element in the data array:

chart.selectAll("div")
     .data(data)
     .enter()
     .append("div")

这不仅会创建一个的数组div 元素，但将数据与每个元素相关联。这是一对一的，每个 div 对应于 data 数组中的单个元素。一个与'4'相关联，一个与'8'相关联，依此类推。

This not only creates an array of div elements, but associates data with each of those elements. This is done on a one-to-one basis, with each div corresponding to a single element in the data array. One is associated with '4', one with '8', and so on.

如果我继续使用 .text（函数） （d）{...}）在选择数组上， d 将引用与每个选定div相关的数据，所以如果我在我的选择中使用以下方法：

If I then go on to use .text(function(d){...}) on the array of selections, d will refer to the data associated with each selected div, so if I use the following method on my selections:

.text(function(d) { return d; });

我的每个 div 都有文字添加，其值为 d ，或与元素关联的数据。

Each of my divs will have text added, the value of which is d, or the data associated with the element.

当选择数组时如果创建了它们，它们也会在数组中得到一个索引。在您的示例中，这对应于数据在数据数组中的位置。如果您的函数同时请求 d 和 i ，那么 i 将对应于此索引。回到我们的 div s，与'4'相关联的 div 将具有索引'0'，' 8'的索引为'1'，依此类推。

When an array of selections is created, they are also given an index in the array. In your example, this corresponds to the position of their data in the data array. If your function requests both d and i, then i will correspond to this index. Going back to our divs, the div associated with '4' will have an index of '0', '8' will have an index of '1', and so on.

同样重要的是要注意所请求变量中使用的字符无关紧要。函数调用中的第一个变量始终是数据，第二个变量是索引。如果我使用像

It's also important to note that the character used in the variable requested doesn't matter. The first variable in the function call is always the data, and the second is the index. If i used a method like

.text(function(cat,moose){ return( "data is: " + cat + " index is: " + moose)})

cat 将对应于选择的数据， moose 将对应于索引。

cat will correspond to the data of the selection, and moose will correspond to the index.

这篇关于函数（d）和函数（d，i）之间的区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！