Javascript d3日历视图:如何将所有内容放在一个svg而不是多个svg中
我正在尝试为创建导出函数 但问题是,原始代码每月创建一个svg。然后,导出仅导出第一个svg。我怎样才能让它成为一个大svg,所有的月份都是以小组的形式出现的呢 有关守则如下:Javascript d3日历视图:如何将所有内容放在一个svg而不是多个svg中,javascript,svg,d3.js,calendar,grouping,Javascript,Svg,D3.js,Calendar,Grouping,我正在尝试为创建导出函数 但问题是,原始代码每月创建一个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", "Rd
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这里有一个快速重构,它将它放在一个单独的
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")
...
这里有一个。这里有一个快速重构,它将它放在一个单独的
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")
...
这里有一个。如果您不受将其放入一个组的限制,那么您还可以将所有svg嵌套到一个外部svg中。在这种情况下,只需更改一行。而不是
var svg = d3.select("body").selectAll("svg")
你会选择
var svg = d3.select("body").append("svg").selectAll("svg")
然后,您的导出可能只是获取包含所有嵌套svg的外部容器svg。如果您不受将其放入一个组的限制,那么您也可以将所有svg嵌套到一个外部svg中。在这种情况下,只需更改一行。而不是
var svg = d3.select("body").selectAll("svg")
你会选择
var svg = d3.select("body").append("svg").selectAll("svg")
然后,您的导出可能只是获取包含所有嵌套svg的外部容器svg