d3 v4 X 축 틱

Question

역사적인 S & P 500 성능 차트를 보여주기 위해 잔인한 시간을 보냅니다. 아무리 노력해도 X 축 "ticks()"메서드는 무시되고 단순히 값 1을 사용합니다. 이는보기가 매우 어렵습니다.

date,value 
1928-01,43.81 
1929-01,-8.30 
1930-01,-25.12 
1931-01,-43.84 
1932-01,-8.64 
1933-01,49.98 
1934-01,-1.19 
1935-01,46.74 
1936-01,31.94 

그리고 나는 아무 소용 작동하는지 확인하기 위해 단지 정수 년으로 날짜를 변환 시도했다 :

var margin = {top: 20, right: 20, bottom: 70, left: 40}, 
    width = $('#sp501').width() - margin.left - margin.right, 
    height = 400 - margin.top - margin.bottom; 

// Parse the date/time 
var parseDate = d3.timeParse("%Y-%m"); 

var x = d3.scaleBand().range([0, width], .05); 

var y = d3.scaleLinear().range([height, 0]); 

var xAxis = d3.axisBottom(x) 
     .tickFormat(d3.timeFormat("%Y")) 
     .ticks(10); // I can't figure out why this is ignored! 

var yAxis = d3.axisLeft(y) 
    .ticks(10); 

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

d3.csv("data/sp500-historical.csv", function(error, data) { 

    data.forEach(function(d) { 
     d.date = parseDate(d.date); 
     d.value = +d.value; 
    }); 

    x.domain(data.map(function(d) { return d.date; })); 
    y.domain([-60, 60]); 

    svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
    .selectAll("text") 
    .style("text-anchor", "end") 
    .attr("dx", "-.8em") 
    .attr("dy", "-.55em") 
    .attr("transform", "rotate(-90)"); 

데이터는 대회 형식입니다.

날짜를 사용하는 X 축 눈금에 문제가 있습니까?

감사합니다.

Answer 1

눈금을 명시 적으로 설정하지 않는 동안이 스 니펫은 축보다 먼저 d3 까지 범위를 공급하여 표시를 정리했습니다.

svg.append("g") 
    .attr("class", "e4rAxis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x));