函数（d）和函数（d，i）之间的区别？答案

【问题标题】：difference between function(d) and function(d,i)?函数（d）和函数（d，i）之间的区别？
【发布时间】：2013-06-27 12:34:50
【问题描述】：

每个D3js初学者都一定有这个想法，我很确定。

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

function(d){return d}

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

例如--->

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

【问题讨论】：

嗯，他们在做不同的事情？如果您不告诉我们使用它们的上下文（调用示例），我们将无法解释太多？
我只是在问一个一般性问题！！！只需通过示例进行一个小的基本解释即可。我一直在通过我经常看到的程序。所以只需基本的一般解释就可以了！！！
嗯，一般的答案是第二个函数比第一个函数做得更多。如果你不告诉我们你在某些程序中在哪里看到了这个，我们就不能做得更好（或者不得不像下面的 nnnnn 一样猜测）
好的，我会编辑我的问题！！！！
你读过.attr documentation吗？ "如果value 是一个常量，那么所有元素都被赋予相同的属性值；否则，如果value 是一个函数，那么函数会为每个选定的元素（按顺序）求值，并传递当前基准d 和当前索引i，将this 上下文作为当前DOM 元素。”

标签： javascript d3.js

【解决方案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; });

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

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

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

这样的方法

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

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

【讨论】：

【解决方案2】：

我希望这个例子可以帮助到你。这是一个完整的网页，您可以在其中开始玩：

<!doctype html>
<meta charset="utf-8">
<title>my first d3</title>
<body>

<script>
  var data=[10,20,30,40];

  var lis = d3.select("body")
              .append("ul")
              .selectAll("li")
              .data(data)

  lis.enter()
     .append("li")
     .text(function(d,i){ return "item n° "+i+" has value: "+d})
</script>

基本上d是数据的值，i是他的索引。您可以在此处查看此示例：http://jsfiddle.net/M8nK8/

【讨论】：

【解决方案3】：

如果您谈论的是回调函数，您将传递给诸如.attr() 之类的方法，然后为当前选择中的每个项目调用该函数，其中i 为您提供当前项目的索引，但是根据您在做什么，您可能不关心索引。因此，尽管 D3.js 将始终使用两个参数调用您的函数，但如果您在特定情况下实际上不需要第二个参数，则您的函数不需要显式声明它。

JavaScript 允许您使用任意数量的参数调用任何函数，而不管函数声明中显式包含多少参数。如果您调用的函数的参数少于定义的参数，则剩余部分将获得值undefined。如果您调用的函数的参数多于定义的参数，您仍然可以使用 arguments object 从函数内访问其他参数 - 或者您可以忽略它们。

（注意：function() 中的f 应该是小写的。）

【讨论】：