d3 日历视图：如何将所有内容放入一个 svg 而不是多个 svg

Question

但问题是原始代码是为每个月创建一个 svg。然后导出仅导出第一个 svg。我怎样才能让它成为一个大的 svg，里面的所有月份都是一组？

有问题的代码是这样的：

var svg = d3.select("body").selectAll("svg")
.data(d3.range(1990, 2011))
.enter().append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "RdYlGn")
.append("g")
.attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");

感谢您的任何想法。 gb5256

Answer 1

这是一个快速重构，它把它放在一个 svg 中，每年移动到它自己的 g。

尺寸变为：

var width = 960,
    yearHeight = 136, // height of each year
    height = yearHeight * 20, // height of entire svg
    cellSize = 17; // cell size

附加较大高度的初始 SVG：

var svg = d3.select("body").append("svg")
    .attr("width",width)
    .attr("height",height);

每年创建 g 并转换为位置：

var g = svg.selectAll(".yearG")
    .data(d3.range(1990, 2011))
    .enter().append("g")
    .attr("class","yearG")
    .attr("class", "RdYlGn")
    .attr("transform", function(d,i){
      return "translate(" + ((width - cellSize * 53) / 2) + "," + ((yearHeight - cellSize * 7 - 1) + (yearHeight * i)) + ")";
    });

向 g 追加元素：

g.append("text")
...    
var rect = g.selectAll(".day")
...
g.selectAll(".month")
...

这是一个 updated gist。

Answer 2

如果您不受限于将其放入一组的限制，您也可以将所有 svg 嵌套到一个外部 svg 中。在这种情况下，只需要更改一行。而不是

var svg = d3.select("body").selectAll("svg")

你会选择

var svg = d3.select("body").append("svg").selectAll("svg")

然后您的导出可能只获取包含所有嵌套 svg 的外部容器 svg。

d3 日历视图：如何将所有内容放入一个 svg 而不是多个 svg

d3 calendar view: how to put all into one svg instead of several svgs

javascript

grouping

svg

calendar

d3.js