d3 - カレンダーの例にラベルを付ける

Question

d3を使用して、カレンダーの変更例（ http://mbostock.github.com/d3/ex/calendar.html）を作成しています。

私は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 + "," + (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