javascript - 功能(d)和功能(d，i)之间的区别？

Question

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

我已经用这个东西玩了几个小时了!!!!但我不知道如何使用它以及它们之间的区别是什么？

function(d){return d}

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

例如--->

变量数据 = [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);

Answer 1

您的示例很好地说明了两者之间的区别。

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

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

这不仅创建了一个 div 元素数组，而且还为每个元素关联了数据。这是在一对一的基础上完成的，每个 div 对应于 data 数组中的单个元素。一个与“4”相关联，一个与“8”相关联，依此类推。

如果我继续在选择数组上使用 .text(function(d){...})，d 将引用关联的数据对于每个选定的 div，所以如果我在我的选择中使用以下方法:

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

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

创建选择数组时，还会在数组中为它们指定一个索引。在您的示例中，这对应于它们的数据在数据数组中的位置。如果您的函数同时请求 d 和 i，则 i 将对应于此索引。回到我们的 div，与“4”关联的 div 的索引为“0”，“8”的索引为“1”，并且等等。

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

这样的方法

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

cat会对应选择的数据，moose会对应index。