logo标签列表

function(d) 和 function(d,i) 的区别是什么？

javascriptd3.js
18

每个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);
好的，它们在做不同的事情吗？如果您不告诉我们它们被用于哪种上下文（例如调用示例），我们将无法解释太多。 - Bergi
我只是在问一个普通问题！！！ 只需要简单的基本解释和示例即可。 我一直在研究程序，经常看到这种情况。所以只需要基本的普通解释即可！ - user2412575
嗯，一般的回答是第二个函数比第一个函数做得更多。如果您没有告诉我们在某些程序中您看到了这个函数在哪里，我们就不能做得更好（或者像下面的nnnnn猜测）。 - Bergi
好的，我会编辑我的问题！！！ - user2412575
1
你有阅读过 .attr 文档 吗？*"如果 value 是一个常量，那么所有元素都将被赋予相同的属性值；否则，如果 value 是一个函数，则该函数将为每个选定的元素（按顺序）进行评估，传递当前数据 d 和当前索引 i，并将 this 上下文作为当前 DOM 元素。"* - Felix Kling
（同样适用于 .style 和 .text） - Bergi
3个回答
14

你的例子很好地说明了这两者之间的区别。

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

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

这不仅创建了一个

元素的数组，还将数据与每个元素关联起来。这是一个一对一的过程，每个
对应data数组中的单个元素。其中一个关联到'4'，一个关联到'8'等等。

如果我在选择数组上使用.text(function(d){...})，d将引用与每个选定的

相关联的数据。因此，如果我在我的选择上使用以下方法：

.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将对应索引。

6

我希望这个例子能够帮助你。这是一个完整的网页，你可以从这里开始玩：

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

1
如果你在谈论传递给方法（例如.attr()）的回调函数，那么该函数将为当前选择中的每个项目调用，其中i为当前项目的索引，但根据您的实际需求，您可能不关心索引。因此，尽管D3.js始终会使用两个参数调用您的函数，但如果您在特定情况下实际上不需要第二个参数，则无需显式声明该参数。
JavaScript允许您调用任何带有任意数量参数的函数，而不管在函数声明中明确包含了多少参数。如果您使用少于定义的参数调用函数，则剩余参数将获得值undefined。如果您使用多于定义的参数调用函数，则仍然可以通过使用arguments对象从函数内部访问其他参数 - 或者忽略它们。
（注意：在function()中应使用小写字母f。）
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接