d3 - 标记日历示例

Question

我正在使用d3构建包含日历示例修改版本的可视化文件： http://mbostock.github.com/d3/ex/calendar.html。

我已经90度改变monthpath功能开启我的日历：

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"), 

我可能错了，但我假设我可以将我一个月可变进我monthpath功能打印我的标签？我试图与内森悠类似于一个日历来结束： http://flowingdata.com/2012/01/11/vehicles-involved-in-fatal-crashes/

任何想法？

感谢

Answer 1

这应该做的伎俩 - 从原来的例子中，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