StatCan / dataviz-components

Data visualizations components made with D3.js
Other
6 stars 3 forks source link

How to set custom x.getTickText for lineChart ? #9

Closed KatiRG closed 5 years ago

KatiRG commented 5 years ago

In line.js it is possible to specify the x tick labels in the settings file using getTickText which then gets used here:

xAxisObj.call(
        d3.axisBottom(x)
          .ticks(sett.x.ticks)
          .tickFormat(sett.x.getTickText ? sett.x.getTickText.bind(sett) : null)
      );

But how to define getTickText ? Something like this always returns a Date even when x.getValue is set to return d.year instead of new Date(d.year + "-01"):

getTickText: function(d) {
        return d;
}

=> returns Date Wed Dec 31 1969 19:00:01 GMT-0500 (Eastern Standard Time) in the default example

How to make this work when the x-axis values are not dates? How can I return a tick text for the x-axis that gets derived from the input data x values ?

KatiRG commented 5 years ago

I have discovered the j counter works so for my own data I have defined the x tick text like this so that it outputs 0, 6, 12, 18, 0, 6, 12, 18, ... for each tick:

ticks: 13,
getTickText: function(val, j) {
      const dt = 5;
      const thisj = j % 4;
      const tickText = thisj + thisj * dt;
      return tickText;
},

val is still a date but I just ignore it

LaurentGoderre commented 5 years ago

You need to set:

{
  x: {
    type: "linear",
  }
}
KatiRG commented 5 years ago

oh i see! Yes that works. I didn't know about that. Thanks!