我正在尝试理解这段代码:
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'在回调函数中的输入参数是什么意思.可能它非常简单.
当您为data()
函数提供元素数组时,d3会在您执行enter()调用时为您迭代它.在回调中,什么d, i
意思是dataset
数组及其索引中的元素.
当你写:
svg.selectAll("rect") .data(dataset) .enter() .append("rect")
D3创建了一堆
元素,一个元素用于数组中的每个条目(对于每个条目,关联数据以及原始数组上的索引由下式给出d, i
).更重要的是,它还将数组中每个条目的数据与该DOM元素相关联,作为数据属性.