1

我正在使用本教程来学习一些基本的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. 它会自动循环遍历数据集中的所有点吗？在最终的代码块中，似乎没有任何迭代，所以我猜它只是对每个数据元素都这样做？

如此迷茫！

4

1 回答 1

1
  1. 因为矩形的宽度固定为 75，并且没有使用随机数。
  2. append("svg:rect") 创建矩形
  3. d 指的是数据集，这些将是随机数。
  4. i 是数据集项目的索引，因此第一个项目为 0，第二个项目为 1，依此类推，最多为 4，因为数据集中有 5 个项目
  5. 是的，你猜对了。
于 2012-05-30T15:49:28.490 回答