Javascript d3-标记日历示例
我正在使用d3构建一个可视化,其中包括日历示例的修改版本: 我已通过更改monthpath功能将日历旋转了90度:Javascript d3-标记日历示例,javascript,d3.js,calendar,label,Javascript,D3.js,Calendar,Label,我正在使用d3构建一个可视化,其中包括日历示例的修改版本: 我已通过更改monthpath功能将日历旋转了90度: function monthPath(t0) { var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0), d0 = +day(t0), w0 = +week(t0), d1 = +day(t1), w1 = +week(t1); return "M" + (d0) * z + ","
function monthPath(t0) {
var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
d0 = +day(t0), w0 = +week(t0),
d1 = +day(t1), w1 = +week(t1);
return "M" + (d0) * z + "," + (w0 + 1) * z
+ "V" + w0 * z
+ "H" + 7 * z
+ "V" + w1 * z
+ "H" + (d1 + 1) * z
+ "V" + (w1 + 1) * z
+ "H" + 0
+ "V" + (w0 + 1) * z
+ "Z";
}
我想在每个月路径行的开始处,在日历的一侧标记月份。因此,我首先定义了月份变量:
month = d3.time.format("%b"),
我可能错了,但我假设我可以将我的month变量插入monthpath函数来打印标签?我试图以一个类似于Nathan Yau的日历结束:
有什么想法吗
谢谢这应该可以做到-在原始示例的
svg.selectAll(“path.month”)
块后插入
var month_name = d3.time.format("%B")
svg.selectAll("text.month")
.data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("text")
.attr("class", "month")
.attr("x", function(d) { return week(d) * cellSize; })
.attr("y", 8 * cellSize)
.text(month_name);
您还需要修改边距,以便为标签腾出空间:
var margin = {top: 19, right: 20, bottom: 40, left: 19},
width = 960 - margin.right - margin.left, // width
height = 156 - margin.top - margin.bottom, // height
cellSize = 17; // cell size
在我看来,分开处理标签会感觉更自然。绘制日历后,您可以选择每个元素,对应于每月的第一天,获取其y坐标,并将其用作相应的标签。Hi Tarek!!这看起来很令人兴奋…你知道我们如何在矩形内显示实际值吗