D3 X-axis tick format & tick value issues

Question

Я пытаюсь отформатировать метки даты и времени для оси x, но я не могу достичь того, что хочу.

var margin = { 
 
    top: 20, 
 
    right: 30, 
 
    bottom: 30, 
 
    left: 40 
 
    }, 
 
    width = 960 - margin.left - margin.right, 
 
    height = 500 - margin.top - margin.bottom; 
 

 
var z = d3.scale.category20c(); 
 

 
var svg = d3.select("body").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 + ")"); 
 

 
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%SZ"); 
 

 
var data = [{ 
 
    data: [ 
 
    ["2016-01-28T15:45:26Z", 5.0], 
 
    ["2016-01-30T15:45:26Z", 0.0], 
 
    ["2016-02-01T15:45:26Z", 0.0], 
 
    ["2016-02-03T15:45:26Z", 0.0], 
 
    ["2016-02-05T15:45:26Z", 0.0], 
 
    ["2016-02-07T15:45:26Z", 0.0], 
 
    ["2016-02-09T15:45:26Z", 0.0], 
 
    ["2016-02-11T15:45:26Z", 0], 
 
    ["2016-02-13T15:45:26Z", 0], 
 
    ["2016-02-15T15:45:26Z", 0], 
 
    ["2016-02-17T15:45:26Z", 0], 
 
    ["2016-02-19T15:45:26Z", 0], 
 
    ["2016-02-21T15:45:26Z", 0], 
 
    ["2016-02-23T15:45:26Z", 0], 
 
    ["2016-02-25T15:45:26Z", 0] 
 
    ], 
 
    label: "a" 
 
}] 
 

 

 
var x = d3.time.scale() 
 
    .range([0, width]); 
 

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

 
var xAxis = d3.svg.axis() 
 
    .scale(x) 
 
    .orient("bottom"); 
 

 
var yAxis = d3.svg.axis() 
 
    .scale(y) 
 
    .orient("left"); 
 

 
var line = d3.svg.line() 
 
    .interpolate("monotone") 
 
    .x(function(d) { 
 
    return x(parseDate.parse(d[0])); 
 
    }) 
 
    .y(function(d) { 
 
    return y(d[1]); 
 
    }); 
 

 
var ary = []; 
 
data.forEach(function(d) { 
 
    ary.push(d.data); 
 
}); 
 

 
x.domain(d3.extent(d3.merge(ary), function(d) { 
 
    return parseDate.parse(d[0]); 
 
})); 
 

 
y.domain([ 
 
    d3.min(data, function(c) { 
 
    return d3.min(c.data, function(v) { 
 
     return v[1]; 
 
    }); 
 
    }), 
 
    d3.max(data, function(c) { 
 
    return d3.max(c.data, function(v) { 
 
     return v[1]; 
 
    }); 
 
    }) 
 
]); 
 

 
function calc(val) { 
 
    var day = Math.floor((new Date() - val)/(24 * 60 * 60 * 1000)); 
 
    if (day === 0) { 
 
    return 'today'; 
 
    } else { 
 

 
    return '-' + day + 'D'; 
 
    } 
 
} 
 

 
xAxis.tickFormat(function(d) { 
 
    console.log("========="); 
 
    console.log(d); 
 
    console.log("========="); 
 
    return calc(d); 
 
}); 
 
svg.append("g") 
 
    .attr("class", "x axis") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(xAxis); 
 

 
svg.append("g") 
 
    .attr("class", "y axis") 
 
    .call(yAxis); 
 

 
var series = svg.selectAll(".series") 
 
    .data(data) 
 
    .enter().append("g") 
 
    .attr("class", "series"); 
 

 
series.append("path") 
 
    .attr("class", "line") 
 
    .attr("d", function(d) { 
 
    return line(d.data); 
 
    }) 
 
    .style("stroke", function(d, i) { 
 
    return z(i); 
 
    });

text.inner-circle { 
 
    font-weight: 400; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
} 
 
text.inner-text { 
 
    font-weight: 400; 
 
    font-size: 36px; 
 
    font-family: 'Metric Regular', 'Metric'; 
 
    text-align: center; 
 
    font-style: normal; 
 
    text-transform: uppercase; 
 
} 
 
path { 
 
    stroke: steelblue; 
 
    stroke-width: 2; 
 
    fill: none; 
 
} 
 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: grey; 
 
    stroke-width: 2; 
 
    shape-rendering: crispEdges; 
 
} 
 
.grid .tick { 
 
    stroke: lightgrey; 
 
    stroke-opacity: 0.7; 
 
    shape-rendering: crispEdges; 
 
} 
 
.grid path { 
 
    stroke-width: 0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Когда я печать x.domain(), я получаю выход, как [Thu Jan 28 2016 15:45:26 GMT+0530 (India Standard Time), Thu Feb 25 2016 15:45:26 GMT+0530 (India Standard Time)], которые являются правильными мин & максимальные значения в соответствии с данными с правильного времени.

Но когда нижеуказанному сниппета прогонов кода, он не начинает пропускать значения из Fri Jan 29 2016 00:00:00 GMT+0530 (India Standard Time) вместо Thu Jan 28 2016 15:45:26 GMT+0530 (India Standard Time) -

xAxis.tickFormat(function(d) { 
console.log("========="); 
console.log(d); 
console.log("========="); 
return calc(d); 
}); 

Так что, когда над пробеги сниппет, это даст мне эти значения d: Консоль вывода

========= 
Fri Jan 29 2016 00:00:00 GMT+0530 (India Standard Time) 
========= 
========= 
Sun Jan 31 2016 00:00:00 GMT+0530 (India Standard Time) 
========= 
========= 
Mon Feb 01 2016 00:00:00 GMT+0530 (India Standard Time) 
========= 
========= 
Wed Feb 03 2016 00:00:00 GMT+0530 (India Standard Time) 
========= 
========= 
Fri Feb 05 2016 00:00:00 GMT+0530 (India Standard Time) 
========= 
========= 
Sun Feb 07 2016 00:00:00 GMT+0530 (India Standard Time) 
========= 
========= 
Tue Feb 09 2016 00:00:00 GMT+0530 (India Standard Time) 
========= 
========= 
Thu Feb 11 2016 00:00:00 GMT+0530 (India Standard Time) 
========= 
========= 
Sat Feb 13 2016 00:00:00 GMT+0530 (India Standard Time) 
========= 
========= 
Mon Feb 15 2016 00:00:00 GMT+0530 (India Standard Time) 
========= 
========= 
Wed Feb 17 2016 00:00:00 GMT+0530 (India Standard Time) 
========= 
========= 
Fri Feb 19 2016 00:00:00 GMT+0530 (India Standard Time) 
========= 
========= 
Sun Feb 21 2016 00:00:00 GMT+0530 (India Standard Time) 
========= 
========= 
Tue Feb 23 2016 00:00:00 GMT+0530 (India Standard Time) 
========= 
========= 
Thu Feb 25 2016 00:00:00 GMT+0530 (India Standard Time) 
========= 

Но я хочу, чтобы код передавал значения даты и времени, указанные во вводе без их изменения.

Пожалуйста, помогите мне.

Answer 1

Стандартное поведение axis заключается в использовании регулярных тиков с хорошими округлыми значениями.

Поскольку вы точно знаете, где именно хотите свои тики; то axis.tickValues([values]) - твой друг. Извлеките список данных из ваших данных и передайте их на xAxis с помощью этой функции.

Изменить: получить массив значений, следующие строки должны сделать работу

myTickValues = ary[0].map(function(d){return parseDate.parse(d[0])}) 
xAxis.tickValues(myTickValues);