javascript – 函数(d)和函数(d,i)之间的区别？

每个D3js初学者都必须经历这个想法,我非常确定.

我已经在这个事情几个小时现在!!!!但是我不知道如何使用它,它们之间有什么区别？

function(d){return d}

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

例如—>

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);

解决方法

你的例子是两个不同之处的好插画师.

在第一个例子中,只使用d. d表示与给定选择相关联的数据.在这种情况下,将创建一个选定的div元素的数组,一个数据数组中的每个元素：

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

这不仅创建了一个div元素的数组,而且将数据与这些元素中的每一个相关联.这是以一对一的方式完成的,每个div对应于数据数组中的单个元素.一个与’4’相关联,一个与’8’相关联,依此类推.

如果我继续在选择数组上使用.text(function(d){…}),d将引用与每个选定div相关联的数据,因此如果在我的选择上使用以下方法：

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

我的每个div都将添加文本,其值为d或与元素相关联的数据.

当创建一个选择数组时,它们也会在数组中给出一个索引.在您的示例中,这对应于数据在数据数组中的位置.如果你的函数要求d和i,那么我将对应于这个索引.回到我们的div,与’4’相关联的div将具有’0’的索引,’8’将具有’1’的索引,等等.

还要注意,请求变量中使用的字符并不重要.函数调用中的第一个变量始终是数据,第二个是索引.如果我使用了一种方法

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

猫将对应于选择的数据,而驼鹿将对应于索引.