当前位置: 动力学知识库 > 问答 > 编程问答 >

d3.js - New to nvD3 - how can I make my unix timestamps appear as dates on the x-axis?

问题描述:

Due disclosure - I am awful at javascript, but trying to learn!

I have an array with a few entries like these in it:

[1349013600] => 232

The key is a unix timestamp, the value is the $ in sales from that day. I am currently graphing these on a multibar chart, which is working great.

The problem is my x-axis, which is currently defined like this:

chart.xAxis

.tickFormat(d3.format(',f'));

It outputs the unix timestamp as a straight int against the x-axis labels and hover tooltip. I want to try and get it to output as D-M-Y or a similar human readable date indicator.

The closest I have found is this bit of code:

chart.xAxis.tickFormat(function(d) {

var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;

return d3.time.format('%x')(new Date(dx))

});

But I am struggling to understand what it's doing and can't implement on my particular chart. Current code looks like this:

nv.addGraph(function() {

var chart = nv.models.multiBarChart()

.stacked(true)

chart.xAxis

.tickFormat(d3.format(',f'));

chart.yAxis

.tickFormat(function(d) { return '$' + d3.format(',f')(d) });

d3.select('#chart1 svg')

.datum(test_data2)

.transition().duration(500).call(chart);

nv.utils.windowResize(chart.update);

return chart;

});

Could someone explain how to make it work and - more importantly - why? Appreciate any guidance!

网友答案:

I solved the problem as soon as I opened the bounty (d'oh!)

Here is what worked for me

.tickFormat(function(d){return d3.time.format('%d-%b')(new Date(d));})

and the trick was to reformat the data for nvd3 AFTER this is axis is created

网友答案:

JavaScript timestamps are im miliseconds, so you should multiply the Unix stamp by 1000 before using it.

分享给朋友:
您可能感兴趣的文章:
随机阅读: