d3 - 標記日曆示例

我正在使用d3構建包含日曆示例修改版本的可視化文件： http://mbostock.github.com/d3/ex/calendar.html。d3 - 標記日曆示例

enter image description here

我已經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/

enter image description here

任何想法？

感謝

來源

2012-04-16 eoin

在我看來，它會感覺更自然分開處理的標籤。繪製日曆後，可以選擇與每月第一天相對應的每個元素，獲取其y座標，並將其用於相應的標籤。 – alm 2012-08-14 10:40:39

這應該做的伎倆 - 從原來的例子中，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

來源

2012-10-18 23:35:02 Tarek

嗨Tarek！這看起來令人興奮......你還知道我們如何顯示矩形內的實際值 – Chitresh 2014-02-22 23:20:31

d3 - 標記日曆示例

回答

相關問題