Question

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

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年之后的一年，然后任何额外的东西都被切断了。有没有办法包装这些？我需要使用某种拖动吗？我希望即使屏幕缩小或扩展也能正常工作。

有什么想法吗？

Answer 1

一点点数学can wrap them。 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，这取决于屏幕宽度，但需要花费更多精力。

有没有办法使用d3包装rects（或其他对象）

1 个答案: