D3 시간 눈금 축 틱이 연도 경계에서 불규칙합니다.

업데이트 :bl.ocks.org example이 솔루션으로 업데이트되었습니다.D3 시간 눈금 축 틱이 연도 경계에서 불규칙합니다.

틱 위치를 계산할 때 시간 눈금 축의 기본 눈금 생성기가 월 및 연도 경계를 무시하도록 할 수 있습니까?

this bl.ocks.org example에서 볼 수 있듯이 일별 눈금이있는 D3 시간 눈금 축이 연말에 걸쳐있는 경우 기본 눈금 생성기는 때때로 불규칙한 간격으로 눈금을 그립니다. 위의 요지에있는이 코드는 12 월 31 일과 1 월 1 일을 제외하고 2 일 간격으로 틱이있는 축을 만듭니다. 둘 다 그려져 불규칙한 모양이됩니다. 나는 바람직하지 않은 진드기 레이블을 빨간색으로 강조했다.

<!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

감사 아담. 나는 내 질문에서 같은 코드가 일련의 다른 길이를 처리하기를 바란다는 것을 잊어 버렸다. 기본 틱값을 오버라이드하여 다른 모든 레이블을 표시하는 경우, 예를 들어 100 일 표시 될 때 축이 너무 복잡해집니다. 나는 어떻게 든 기존 레이블 추려낸 행동을 보존하기를 바라고있다. –

당신의 대답은 저의 솔루션으로 이끌었습니다. 이것은 제 레이블을 건너 뛰는 데 필요한 간격을 계산하는 것이 었습니다. 필자는 라벨 폭을 알고 차트의 폭을 알고 있기 때문에'var max_label_count = width/LABEL_WIDTH, var label_skip = Math.ceil (interval.range (t1, t2) .length/max_label_count)'및 그런 다음 솔루션의'2'에 대한'label_skip'을 대체하십시오. –

D3 시간 눈금 축 틱이 연도 경계에서 불규칙합니다.

답변

관련 문제