我正在尝试为 D3 Calendar View
但问题是原始代码是为每个月创建一个 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
最佳答案
这是一个快速重构,将它放在一个 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 .
关于javascript - d3 日历 View : how to put all into one svg instead of several svgs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29133487/