输入参数d在D3.js函数中是什么意思? [英] What does input parameter 'd' mean in D3.js function?

问题描述

我正在尝试理解以下代码:

I'm trying to understand this code:

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"作为回调函数中的输入参数的含义.可能很简单.

I can't figure out what does 'd' and 'i' mean as input parameters inside callback functions. Probably it's very simply.

推荐答案

为data()函数提供元素数组时，d3在您执行enter()调用时会为您进行迭代.在回调中，d, i的含义是dataset数组及其索引中的元素.

When you give an array of elements for the data() function, d3 iterates it for you when you do the enter() call. In the callback what d, i means is an element from the dataset array and its index.

撰写时:

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

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

D3 creates a bunch of <bar> elements, one for each entry in the array (for each entry the associated data along with index on the original array is given by d, i). More importantly, it also associates the data for each entry in the array with that DOM element, as a data property.

这篇关于输入参数d在D3.js函数中是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！