dc.js d3.js ElasticX with date values not rendering correctly when filtered

问题

Attempted to follow this example Customize dc.js date x-axis

here: https://codepen.io/rdavi10471a2/pen/EeYYGB

as follows:

    function calc_ticks(chart) {
        var ticks = d3.timeMonths(chart.xAxisMin(), chart.xAxisMax()); 
        console.log("min: "+chart.xAxisMin()+' Max:'+chart.xAxisMax())
         console.log("ticks")
        console.log(ticks)
        chart.xAxis().tickValues(ticks);
   }

Initial rendering is correct but when you use the dc.js filter to filter to a single year the x axis does not render correctly. January for the year chosen is not selected to be in the ticks array so all other ticks are off by one element. I have filtered to 2018 here If you use the mouseover you will see that the last tick is 2018-08

unsure why this is happening another interesting thing is if you modify the minimum date using moment.js like this

 var ticks = d3.timeMonths(moment(chart.xAxisMin()).subtract(1, 'months'), chart.xAxisMax());

it initially shows this

but on filtering shows this:

I am not sure what this implies but it is curious.

回答1:

The main problem is the way you create the dates.

You iterate over all the months from 2017-01-01 till 2018-now-01 and create new dates based on this

datenotime = new Date(date.getFullYear(), date.getMonth()+1, 0);

Month has a range of 0..11, month 12 does not exist in JS and Day has a range 1..31, day 0 does not exist.

If you change that to

datenotime = new Date(date.getFullYear(), date.getMonth(), date.getDate());

is equal to

datenotime = date;

The ticks on the x-axis are drawn at the Year-Month-01 and to make that more clear change the modification of the tick text positioning.

salesbymonth.renderlet(function (chart) {
    // ....
    chart.selectAll('g.x text')
        .attr('transform', 'translate(5,5) rotate(-90)')
        .attr('dx', "-0.5em")
        .attr('dy', "-0.7em")
        .style('font-weight',"bold")
        .style('font-size',"12px")
        .style('text-anchor',"end");
});

回答2:

   //   datenotime = new Date(date.getFullYear(), date.getMonth()+1, 0)
       datenotime = date  
 //add a month so that the last point gets a tick mark
  var ticks = d3.timeMonths(chart.xAxisMin(), 
              moment(chart.xAxisMax()).add(1,'months'));

this change fixed the issue.

来源：https://stackoverflow.com/questions/51941373/dc-js-d3-js-elasticx-with-date-values-not-rendering-correctly-when-filtered

标签

d3.js

dc.js

crossfilter