在 D3.js 中调用函数作为数据

calling a function as data in D3.js

本文关键字：数据 函数 调用 D3 js      更新时间：2023-09-26

我刚刚开始使用 d3.js并且正在浏览 Nick 在 github 上的源代码，并卡在将函数作为数据传递到 d3.js 的部分。

分配给next var的函数中的var x从 0 增加到loop counter，如下面的 jsbin 链接所示。我无法完全理解 x 如何自动递增，以及它如何知道每次都需要递增的循环计数器。

next variable是从>> newdata从>> render function调用

的？

我只是在这里设置了一个 jsbin。

这部分：

.data(newData);

只是调用 newData 函数并将返回绑定到选择。

因此，每次调用setInterval中的render都只是将next函数推送到他的data数组中。

这部分然后：

selection.attr("class", "v-bar")
    .style("height", function (d, i) {
        return d(i) + "px"; // <- E
    })
    .select("span")
        .text(function(d, i){ 
            return d(i); // <- F
    });

调用 d 这是数据数组中每个元素的next函数。它传递data数组中的索引位置。

所以第一个render调用是：

 15 + 0 * 0;

二是：

 15 + 0 * 0;
 15 + 1 * 1;

三是：

 15 + 0 * 0;
 15 + 1 * 1;
 15 + 2 * 2;

首先，为了简化起见，这个

var selection = d3.select("#container").selectAll("div")
  .data(newData); // <- D

就像写作一样

var arrayOfFunctions = newData();
var selection = d3.select("#container").selectAll("div")
  .data(arrayOfFunctions); // <- D

因此，例如，调用此代码 3 次（通过 setInterval）会建立如下arrayOfFunctions：

arrayOfFunctions = [
  function (x) { return 15 + x * x; },
  function (x) { return 15 + x * x; },
  function (x) { return 15 + x * x; }
]

（注意：从字面上看，它不是那样的，因为实际上它们只是指向同一功能的指针next

所以没有什么会增加x.但是一旦它将这些函数绑定到 DOM 元素（通过 data(arrayOfFunctions) 并运行此位：

    selection.attr("class", "v-bar")
        .style("height", function (d, i) {
            return d(i) + "px"; // <- E
        })

d是function (x) { return 15 + x * x; }的，i（即 0、1 或 2）在调用该函数时作为x传入d(i)。

这就是本质上增加x的原因。

相关文章：