Question

此处： https://codepen.io/rdavi10471a2/pen/EeYYGB

如下：

    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);
   }

初始渲染是正确的，但是当您使用dc.js过滤器过滤到一年时，x轴无法正确渲染。所选年份的一月未选择在ticks数组中，因此所有其他ticks被一个元素关闭。我已经过滤到2018年了如果使用鼠标悬停，您会看到最后一个刻度是2018-08

不确定为什么会发生另一件有趣的事情是，如果您使用此类的moment.js修改最短日期

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

最初显示此

但在过滤时显示以下内容：

我不确定这意味着什么，但很好奇。

Answer 1

主要问题是创建日期的方式。

您遍历从2017年1月1日到2018年现在的整个月，并以此为基础创建新日期

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

月份的范围为0..11，JS中不存在月份12，日期的范围为1..31，第0天不存在。

如果将其更改为

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

等于

datenotime = date;

x轴上的刻度线是在Year-Month-01绘制的，并且要使其更清晰地更改刻度线文本位置的修改。

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");
});

Answer 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'));

此更改解决了该问题。

过滤后日期值无法正确呈现的dc.js d3.js ElasticX

2 个答案: