Question

每个 D3js初学者必须经历这个想法，我对此非常肯定。

我现在已经有几个小时了！!!!但我不知道怎么用它们和它们之间的差异是什么？

function(d){return d}

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

例如---＆gt;

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);

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

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

Answer 3

如果您正在讨论将传递给.attr()等方法的回调函数，则会为当前选择中的每个项调用该函数，其中i为您提供索引。当前项目，但取决于你正在做什么，你可能不关心索引。因此，虽然D3.js总是用两个参数调用你的函数，但如果在特定情况下你实际上不需要第二个参数，那么你的函数不需要明确地声明它。

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

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

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

3 个答案: