D3時間軸座標在年邊界處不規則

更新：bl.ocks.org example已更新爲解決方案。D3時間軸座標在年邊界處不規則

計算滴答位置時，是否可以使時間軸軸的默認滴答發生器忽略月份和年份邊界？

如在this bl.ocks.org example中看到的那樣，當具有星期滴答的D3時間軸橫跨一年的結束時，默認滴答發生器有時會繪製具有不規則間距的滴答。這個代碼（同樣在上面的要點中）導致一個座標軸每兩天間隔一次，除了12月31日和1月1日，這兩個都被繪製，導致不規則的外觀。我用紅色突出顯示了不需要的刻度標籤。

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 
    p { width: 600px; margin-bottom: 30px; } 
    .chart { shape-rendering: crispEdges; } 
    .axis text { font: 10px sans-serif; } 
    .axis line, .axis path { fill: none; stroke: black; } 
</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 

var start_date = "2013-12-21T00:00:00Z", 
    end_date = "2014-01-07T00:00:00Z", 
    iso  = d3.time.format.iso, 
    t1   = iso.parse(start_date), 
    t2   = iso.parse(end_date), 

var margin = {top: 0, right: 10, bottom: 20, left: 10}, 
    width = 600 - margin.left - margin.right, 
    height = 100 - margin.top - margin.bottom; 

var x = d3.time.scale() 
    .domain([t1, t2]) 
    .range([0, width]) 

var xAxis = d3.svg.axis() 
    .scale(x) 

var svg = d3.select("body").append("svg") 
    .attr("class", "chart") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

svg.append('g') 
    .attr('class', 'x axis') 
    .call(xAxis) 
    .selectAll('text') 
    .attr('fill', function(d) { if(is_problematic(d)) { return "red"; } }) 

function is_problematic(d) { 
    return ((d.getDate() == 31) || (d.getDate() == 1)); 
}

來源

2014-01-23 Ben Kimball

如果你明確地設置刻度值，你會避免在今年四捨五入問題的怪異結束：

var xAxis = d3.svg.axis() 
    .scale(x) 
    .tickValues(d3.time.days(t1, t2).filter(function(d, i){ return !(i % 2); }))

fixed

來源

2014-01-23 02:02:28

感謝亞當。我忘記在我的問題中提到我希望使用相同的代碼來處理一系列不同的長度。如果我通過覆蓋默認的tickValues來顯示其他所有標籤，那麼當顯示100天時，該軸將會過於擁擠。我希望以某種方式保留現有的標籤剔除行爲。 –

您的回答讓我想到了我的解決方案，即計算在標籤間跳過多少間隔。因爲我知道標籤的寬度，並且知道圖表的寬度，所以我使用了'var max_label_count = width/LABEL_WIDTH，var label_skip = Math.ceil（interval.range（t1，t2）.length/max_label_count）'和然後在您的解決方案中將'label_skip'替換爲'2'。 –

D3時間軸座標在年邊界處不規則

回答

相關問題