D3.js 有没有一种方法可以使用d3包装矩形（或其他对象）

我正在从事一个项目，在这个项目中，我得到了一个年份列表，我需要在SVG中显示它们。到目前为止，我有这个演示我想做什么。我将此信息呈现如下

var years = [
  2011,
  2012,
  2013,
  2014,
  2015,
  2016,
  2017,
  2018,
  2019,
  2020,
  2021,
  2022,
  2023,
  2024
];
$scope.render = function(){
  var data = $scope.svg.selectAll(".year")
    .data(years);
  data.exit().remove();
  var groups = data.enter()
                 .append("g");
  groups.append("rect")
    .attr("x", function(d, i){
      return (50 * i) + (10*i)
    })
    .attr("y", 0)
    .attr("height", 50)
    .attr("width", 50)
    .attr("fill", "blue")
    .attr("class", ".year");
  groups.append("text")
    .attr("x", function(d, i){
      return (50 * (i)) + (10*i) + 25
    })
    .attr("y", function(d, i){
      return 25
    })
    .attr("alignment-baseline", "middle")
    .attr("text-anchor", "middle")
    .text(function(item){
      return item
    })
    .attr('fill', 'white');
}

这一切正常，直到2017年后的一年，然后任何额外的东西都会被切断。有没有办法把这些包起来？我需要用一些拖拽吗？我想这是工作，即使屏幕缩小或扩大

有什么想法吗？

一点数学知识。x和/或y的百分比组合

  var years = [
    2011,
    2012,
    2013,
    2014,
    2015,
    2016,
    2017,
    2018,
    2019,
    2020,
    2021,
    2022,
    2023,
    2024
  ];
  $scope.render = function(){
    var data = $scope.svg.selectAll(".year")
      .data(years);
    data.exit().remove();
    var groups = data.enter()
                     .append("g");
    groups.append("rect")
      .attr("x", function(d, i){
        return (60 * (i % 7))
      })
      .attr("y", function(d, i) {
        return Math.floor(i / 7) * 70
      })
      .attr("height", 50)
      .attr("width", 50)
      .attr("fill", "blue")
      .attr("class", ".year");
    groups.append("text")
      .attr("x", function(d, i){
        return (60 * (i % 7)) + 25
      })
      .attr("y", function(d, i) {
        return Math.floor(i / 7) * 70 + 25
      })
      .attr("alignment-baseline", "middle")
      .attr("text-anchor", "middle")
      .text(function(item){
        return item
      })
      .attr('fill', 'white');
  }

您可以将我使用的硬编码7替换为一个动态值，该值取决于屏幕宽度，只需稍加努力。

工作中遇到的问题（愚蠢的防火墙）我会竖起大拇指这看起来非常有趣。一旦我确认了，我会把答案记下来。谢谢