d3 data()中调用数组，却只显示数组中第二个元素的内容

Question

//矩形
    var gridWidth = width / allSingleYears.length;
    var rect = svg.append("g")
      .append("rect")
      .data(data)
      .enter()
      .attr("x", function(d) {
        console.log(d.year); //这里是怎么回事，为什么只显示数组中第二个元素的内容
        return xScale(d.year);
      })
      .attr("y", function(d) {
        return yScale(d.month);
      })
      .attr("width", function(d) {
        return gridWidth;
      })
      .attr("height", function(d) {
        return height / month.length;
      })

全部代码

Answer 1

data函数的使用有问题：

var rect = svg.append("g")
      .selectAll("rect") // 预先确定要跟data数组绑定数据的元素，应该为一组元素
      .data(data)
      .enter()
      .append('rect') // 然后再根据数组添加一组元素，实现data跟element的数据绑定
      .attr("x", function(d) {
        console.log(d.year);
        return xScale(d.year);
      })