d3 v4 отметки по оси X

Question

Имея жесткое время, пытаясь проиллюстрировать историческую диаграмму производительности S&P 500 из года в год. Что бы я ни пытался, метод "ticks()" по оси X игнорируется и просто использует значение 1. Что очень трудно увидеть.

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)" );

Данные в формате соглашения:

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

И я попытался преобразовать даты в целые годы, чтобы увидеть, работает ли это, но безрезультатно.

Я чокнутый или что-то не так с тиками оси X, использующими даты?

Спасибо!

Answer 1

Не устанавливая галочки явно, этот фрагмент работал для подачи экстента до d3 перед вызовом axisBottom, который затем очищал дисплей.

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