StatCan / dataviz-components

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

lineChart tickValues option #10

Open KatiRG opened 5 years ago

KatiRG commented 5 years ago

Currently, line.js has options for .ticks and .tickFormat but I also need the .tickValues option (https://github.com/d3/d3-axis#axis_tickValues).

This is the current code for line.js:

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

I have made a callback in settings called z.getxtickIdx that reads the xtick index array defined in the settings filterData cb:

z: {
  getxtickIdx: function(filteredData) {
      return filteredData.map((d) => {
        return d.xtickIdx;
      })[0];
    }
}

and then I call it in the xAxisObj.call:

xAxisObj.call(
        d3.axisBottom(x)
          .ticks(sett.x.ticks)
          .tickValues(sett.z.getxtickIdx ? sett.z.getxtickIdx.call(sett, filteredData) : null)
          .tickFormat(sett.x.getTickText ? sett.x.getTickText.bind(sett) : null)
      );

Can you please let me know if this is the proper way to configure the .tickValues ? Thanks!

LaurentGoderre commented 5 years ago

Doesn't tickFormat allow you to do this already?

KatiRG commented 5 years ago

tickFormat gives me the text I need to display on the ticks, which in my case is cyclical: 0, 6, 12, 18, 0, 6 ,12, 18...etc.

But the values of the ticks cannot be cyclical otherwise all duplicates will just be mapped on top of each other. So I use tickValues to set up the array, which in my case is every 6 points: 0, 6, 12, 18, 24, 30, 36, ..., 162