输入参数'd'在D3.js函数中意味着什么？

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元素相关联,作为数据属性.