17

每个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);
4

3 回答 3

14

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

在第一个示例中，d使用了 only。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则将对应于该索引。回到我们div的 s，div与 '4' 相关联的索引为 '0'，'8' 的索引为 '1'，依此类推。

同样重要的是要注意，请求的变量中使用的字符无关紧要。函数调用中的第一个变量始终是数据，第二个是索引。如果我使用类似的方法

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

cat将对应于选择的数据，moose并将对应于索引。

于 2013-06-27T14:04:13.920 回答
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/

于 2013-06-27T16:32:21.733 回答
1

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

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

（注意：你应该有一个小写字母f。function()）

于 2013-06-27T12:44:10.280 回答