scaleTime 최소 눈금 값

Question

나는 모두가 참으로 아주 잘 작동

var xScale = d3.scaleTime() 
    .domain([fromDate, toDate]) 
    .range([0, width]); 

var xAxis = d3.axisBottom(xScale); 

function customXAxis(g) { 
    g.call(xAxis); 
    g.select(".domain").remove(); 
    g.selectAll(".tick line").attr("stroke", "white"); 
    g.selectAll(".tick text").attr("fill", "white"); 
} 

g.append("g") 
    .attr("transform", "translate(0," + height + ")") 
    .call(customXAxis); 

같은 x 축 정의합니다.

그러나 눈금이 최소 하루로 표시되도록하고 싶습니다. fromData 및 TODATE 그것이 쇼 틱 몇 일 차이가있는 경우가

Mon-10___12PM___Tue-11___12PM___Wed-13___12PM___Thu-14___12PM 

는 어떻게 얻을 수 있습니다 .... 의미로 하루 값의 시간을 표시하지 않으려면?

도움을 주시면 감사하겠습니다.

Answer 1

당신은 축 발전기의 intervals을 설정할 수 있습니다

구축해, 지정된 바닥을 주어 옵셋 기능 새 사용자 정의 간격 및 선택적 카운트 기능. 그대로 예를 들어

,이 (여기 도메인이 불과 3 일 내에) 코드입니다 :

var svg = d3.select("svg"); 
 

 
var xScale = d3.scaleTime() 
 
    .domain([new Date("January 1, 2017 00:00:00"), new Date("January 4, 2017 00:00:00")]) 
 
    .range([20, 480]); 
 

 
var xAxis = d3.axisBottom(xScale); 
 

 
svg.append("g") 
 
    .attr("transform", "translate(0,100)") 
 
    .call(xAxis);

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg width="500"></svg>

지금

동일한 코드, d3.timeDay로 :

var svg = d3.select("svg"); 
 

 
var xScale = d3.scaleTime() 
 
    .domain([new Date("January 1, 2017 00:00:00"), new Date("January 4, 2017 00:00:00")]) 
 
    .range([20, 480]); 
 

 
var xAxis = d3.axisBottom(xScale) 
 
    .ticks(d3.timeDay) 
 
    .tickFormat(d=>d3.timeFormat("%a %d")(d)); 
 

 
svg.append("g") 
 
    .attr("transform", "translate(0,100)") 
 
    .call(xAxis);

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg width="500"></svg>

추신 : tickFormat은 단지 첫 번째 진드기를 변경하는 것입니다, 그것에 신경 쓰지 마세요.