Fatal编程技术网
  • javascript/
  • Javascript 函数（d）和函数（d，i）之间的区别？

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

javascript d3.js

Javascript 函数（d）和函数（d，i）之间的区别？,javascript,d3.js,Javascript,D3.js,每个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)

每个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);
如果您正在讨论将传递给这样的方法的回调函数，那么将为当前选择中的每个项调用该函数，
i
将为您提供当前项的索引，但根据您所做的操作，您可能不关心索引。因此，尽管D3.js始终使用两个参数调用函数，但如果在特定情况下不需要第二个参数，则函数不需要显式声明它

JavaScript允许您使用任意数量的参数调用任何函数，而不管函数声明中显式包含多少参数。如果调用的函数的参数少于定义的参数，则剩余参数将得到值
未定义的值
。如果调用的函数的参数多于定义的参数，则仍然可以使用-从函数中访问其他参数，也可以忽略这些参数


（注意：在
function（）
中应该有一个小写的
f
）
您的示例很好地说明了两者之间的区别

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


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


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

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


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


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

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

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


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



cat
将对应于选择的数据，
moose
将对应于索引。
我希望这个示例可以帮助您。这是一个完整的网页，您可以在其中开始播放：


<!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>




我的第一个d3
var数据=[10,20,30,40]；
var lis=d3。选择（“主体”）
.附加（“ul”）
.selectAll（“li”）
.数据（数据）
lis.enter（）
.附加（“li”）
.text（函数（d，i）{return“item n°”+i+”的值为：“+d}”）


基本上，
d
是数据的值，
i
是他的索引。

你可以在这里看一看这个例子：
他们在做不同的事情？如果你不告诉我们使用它们的上下文（一个调用示例），我们将无法解释太多？我只是在问一个一般性的问题！！！只要一个小的基本解释和例子就可以了。我一直在看我经常看到的节目。所以只要基本的一般解释就可以了！！！一般的答案是，第二个函数比第一个函数做得更多。如果你不告诉我们在一些程序中你在哪里看到了这一点，我们就不能做得更好（或者只能像下面的nnnnn那样猜测）好的，我将编辑我的问题！！！！你看过报纸了吗？如果
value
是一个常数，则所有元素都被赋予相同的属性值；否则，如果
value
是一个函数，则为每个选定元素（按顺序）计算该函数，传递当前数据
d
和当前索引
i
，其中
此
上下文作为当前DOM元素。”