D3.js linechart - управляющая ось x с датами

Question

Я создал линейную диаграмму с D3.js, но не могу понять, как полностью управлять осью X.

Вы можете увидеть мой пример ее: http://codepen.io/DesignMonkey/pen/KdOZNQ

Я сидел отсчитывать тики для оси х до 3-х дней, и у меня есть массив с диапазоном 31 дней, который должен показывать день в каждом конец оси x и пропустить каждый третий день. Но по какой-то причине, когда ось a проходит 1-е место в месяце, она показывает 2015-08-31 и 2015-09-01 и не пропускает до 2015-09-03, как это предполагается.

Мой код Linechart здесь:

// Set the dimensions of the canvas/graph 
let margin = {top: 30, right: 20, bottom: 30, left: 40}, 
    width = 330 - margin.left - margin.right, 
    height = 180 - margin.top - margin.bottom; 


// Set the ranges 
var x = d3.time.scale().range([0, width]).nice(10); 
var y = d3.scale.linear().rangeRound([height, 0]); 

// Define the axes 
var xAxis = d3.svg.axis().scale(x) 
    .orient("bottom") 
    .ticks(d3.time.days, 3) 
    .tickFormat(d3.time.format('%e')) 
    .innerTickSize(-height) 
    .outerTickSize(0) 
    .tickPadding(10) 

var yAxis = d3.svg.axis().scale(y) 
    .orient("left") 
    .ticks(5) 
    .innerTickSize(-width) 
    .outerTickSize(0) 
    .tickPadding(10) 

// Define the line 
var valueline = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.value); }); 

// Adds the svg canvas 
let svg = d3.select(template.find(".chart")) 
    .append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

// For each line 
data.forEach((item) => { 

    // Scale the range of the data 
    x.domain(d3.extent(item.data, function(d) { 
    if(d.value != undefined) 
     return d.date; 
    })); 

    // Create a perfect looking domainrange to the nearest 10th 
    y.domain([ 
    Math.floor(d3.min(item.data, function(d) { 
     if(d.value != undefined) 
     return d.value; 
    })/10)*10 
    , 
    Math.ceil(d3.max(item.data, function(d) { 
     if(d.value != undefined) 
     return d.value; 
    })/10)*10 

    ]); 

    // Add the X Axis 
    svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

    // Add the Y Axis 
    svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis); 

    // Add only points that have value 
    svg.append("path") 
    .attr("class", "line color-"+ item.colorClass) 
    .attr("d", valueline(item.data.filter((pnt) => pnt.value != undefined))); 

}); 

Может кто-нибудь сказать мне, что я делаю неправильно здесь? :)

/Peter

UPDATE:

я узнал, что это похоже, что он хочет, чтобы показать новый месяц. См. Это ручку: http://codepen.io/DesignMonkey/pen/jbgYZx

Он не говорит «Septemper 1», но только «Septemper», как будто хочет обозначить изменение месяца. Как отключить это? :)

Answer 1

Решение:

var count = 0; 
var tickRange = data[0].data.map((item) => { 
    count = (count == 3) ? 0 : count+1; 
    if(count == 1) { 
    return item.date; 
    } 
}) 
.filter((d) => d != undefined); 

, а затем:

var xAxis = d3.svg.axis().scale(x) 
     .orient("bottom") 
     .ticks(d3.time.days, 3) 
     .tickValues(tickRange) 
     .tickFormat(d3.time.format('%e')) 
     .innerTickSize(-height) 
     .outerTickSize(0) 
     .tickPadding(10) 

Спасибо :)