CODEWITHSUNDEEP
javascriptd3.js
user1441287
user1441287

Reputation: 411

d3 custom date format

I have received a request from a client for a project burndown chart using a line graph. The problem is they want the date on the x-axis to be formatted in a particular way mmm dd-dd/yy (e.g. Nov 18-24/12) where 18-24 is a week (18th through the 24th). Is it possible to create a custom date format in D3, If not what would be the best way to accomplish this?

Upvotes: 0

Views: 2356

Answers (4)

user1441287
user1441287

Reputation: 411

I went with creating my own format specifier "%o"

o: function(d) {
    var weekInSeconds = 6 * 86400000;
    var eowDate = new Date(d.getTime() + weekInSeconds);
    return d3_time_zfill2(eowDate.getDate());
},

around line 6824 in the d3.v2.js file. Not the cleanest implementation but it works.

Upvotes: -1

Bill
Bill

Reputation: 25555

Yes, you can create a custom date format.

var xAxis = d3.svg.axis()
    .scale(x)
    .tickFormat(customDateFormat);

function customDateFormat(date) {
  // figure out what week the current date is in
  // and return the appropriate string
}

If you want to be even fancier, you can implement a full formatter in the same way that d3.js implemented the built in formatter. See http://bl.ocks.org/4149176 for an example of that.

Upvotes: 4

user1783490
user1783490

Reputation: 373

I've used javascript to sort/format the date and then send the value to D3 in the past when it comes to unconventional formats.

I've used date.js. It's an older js library but it gets the job done and it offers a wide range of formats.

Upvotes: 0

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

Yes, this is possible. See the documentation on d3.time.format.

Upvotes: 0

Related Questions