将d3.js代码与未显示的随机数据以及在定义之前显示的多个SVG混淆

Question

我正在使用this tutorial来学习一些基本的d3。

我正处于“绑定数据”部分，这一点到目前为止证明非常令人困惑。

var dataset = [],
    i = 0;

for(i=0; i<5; i++){
    dataset.push(Math.round(Math.random()*100));
}        

alert("Data: " + dataset)

var sampleSVG = d3.select("#viz")
    .append("svg:svg")
    .attr("width", 400)
    .attr("height", 75);    

sampleSVG.selectAll("rect")
    .data(dataset)
    .enter().append("svg:rect")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("height", 40)
    .attr("width", 75)
    .attr("x", function(d, i){return i*80})
    .attr("y", 20);

我的问题是：

1. 我们创建了一个包含5个随机数的数据集。为什么这些没有反映在矩形的宽度上？
2. .append("svg:svg")没有引用任何矩形，那么如果它们甚至不存在，我们怎么能selectAll("rect")呢？
3. 在匿名函数中，d引用什么？
4. 在匿名函数中，i指的是什么？什么是乘以80？
5. 它会自动循环遍历数据集中的所有点吗？在最终的代码块中，似乎没有任何迭代，所以我猜它只为每个数据元素执行此操作？

太困惑了！

Answer 1

1. 因为矩形的宽度固定为75并且不使用随机数。
2. append（“svg：rect”）创建矩形
3. d指的是数据集，这些是随机数。
4. i是数据集项的索引，因此第一项为0，第二项为1，依此类推，最多为4，因为数据集中有5项
5. 是的，你猜对了。