Question

我正在尝试理解这段代码：

var w = 900;
var h = 200;
var barPadding = 1;

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
            11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

//Create SVG element
var svg = d3.select("div")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

svg.selectAll("rect")
 .data(dataset)
 .enter()
 .append("rect")
 .attr("x", function(d, i) {
        return i * (w / dataset.length);
 })
 .attr("y", function(d) {
        return h - (d * 4);
 })
 .attr("width", w / dataset.length - barPadding)
 .attr("height", function(d) {
        return d * 4;
 })

我无法弄清楚'd'和'i'在回调函数中的输入参数是什么意思。可能它非常简单。

Answer 1

当您为data()函数提供一系列元素时，d3会在您执行enter（）调用时为您迭代它。在回调中，d, i的含义是来自dataset数组及其索引的元素。

当你写：

   svg.selectAll("rect")
 .data(dataset)
 .enter()
 .append("rect")

D3创建了一堆<bar>个元素，每个条目对应一个条目（对于每个条目，关联数据以及原始数组上的索引由d, i给出）。更重要的是，它还将数组中每个条目的数据与该DOM元素相关联，作为数据属性。

Answer 2

d是要呈现的数据值，i是数据数组中该数据值的索引。

因此，在渲染第一个数据点时，d为5，i为0

输入参数'd'在D3.js函数中的含义是什么？

2 个答案: