D3日历视图：如何把所有到一个SVG而不是几个svgs

的我试图创造 D3 Calendar View D3日历视图：如何把所有到一个SVG而不是几个svgs

导出功能，但问题是，原来的代码是创建每月一个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

来源

2015-03-18 gb5256

这是一个快速重构，它将它放在一个单独的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 s：

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

这是updated gist。

来源

2015-03-19 00:31:14 Mark

如果你不受限制把它放到一个组中，你可以将所有svgs嵌套到一个外部svg中。在这种情况下，只需要更改一行。取而代之的

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

你会去

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

你的出口则可能只是抓住一个包含所有嵌套svgs外容器SVG。

来源

2015-03-19 09:00:22 altocumulus

D3日历视图：如何把所有到一个SVG而不是几个svgs

回答

相关问题