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"; 
} 

나는 각각의 시작, 달력의 측면에, 달 레이블 싶습니다 월 패스 라인. 아마 잘못 생각하지만 난 내 라벨을 인쇄 내 monthpath 기능으로 내 달 변수를 삽입 할 수있는 가정입니다

month = d3.time.format("%b"), 

: 그래서 달 변수를 정의하여 시작? 나는 나단 야마에 의한 것과 유사한 일정으로 끝낼려고 : 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