我在 xAxis 上显示日期时遇到一个奇怪的问题。 我正在生成这样的数据:

for (i=0;i<12;i++){
    date=new Date(2013,i,1);

    ideas.values[i] = {"y" : Math.round(2*i*getRandom(1,2)), "x": date};
}

在我的折线图中，我想像这样创建 x 轴:

chart.xAxis.tickSize(12)            
           .tickFormat(function(d) {         
             var date = new Date(d);
             testarr.push(date);
             return d3.time.format('%b %y')(date);
            });

现在，如果我查看图表，只能看到几个日期。这就是我为调试问题创建数组“testarr”的原因。 testarr的内容是 8 个日期而不是 12 个(我生成了 12 个)

现在更奇怪的是:将完全相同的数据放入 MultiBarChart 并使用完全相同的 chart.xAxis.... 函数，测试数组内容为 12 个值

我很无语，希望有人能帮帮我。

谢谢大家!

完整代码如下:

折线图:lineChart Result

<script>
var chart;
nv.addGraph(function() {
  chart = nv.models.lineChart()
  .options({
    margin: {left: 100, bottom: 100},
    //x: function(d,i) { return i},
    showXAxis: true,
    showYAxis: true,
    transitionDuration: 250
  })
  ;
  chart.xAxis.tickSize(12)            
                  .tickFormat(function(d) {         
         var date = new Date(d);
          return d3.time.format('%b %y')(date);
                 });

    chart.yAxis
       .axisLabel('y axis')
       .tickFormat(d3.format(''))
       .axisLabelDistance(50);

  d3.select('#chart1 svg')
    .datum(dataForChart)
    .call(chart);

  //TODO: Figure out a good way to do this automatically
  nv.utils.windowResize(chart.update);
  //nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });

  chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

  return chart;
});

var dataForChart=function(){

       var section1 = new Array();
       section1.key="Section 1";
       section1.values = new Array();
       section1.color="#1F77B4";

       var section2 = new Array();
       section2.key="Section2";
       section2.values = new Array();
       section2.color="#2CA02C";

        for (i=0;i<12;i++){
            date=new Date(2013,i,1);

            section1.values[i] = {"y" : Math.round(2*i*getRandom(1,2)), "x": date};
            section2.values[i] = {"y" : Math.round(6*i+2*getRandom(1,2)), "x": date};
         }

         function getRandom(min, max) 
         {
            return Math.random() * (max - min + 1) + min;
         }

         var dataArray=new Array();
         dataArray.push(section1);
         dataArray.push(section2);

       return dataArray;
};    

</script>

如果我不注释掉

//x: function(d,i) { return i},

部分，轴处处显示 Jan70。

MultiBarChart 代码如下:MultiBar Result

<script>
var chart;
nv.addGraph(function() {
    chart = nv.models.multiBarChart()
      .margin({bottom: 30, top:25})
      .transitionDuration(300)
      .delay(0)
      .groupSpacing(0.2)
      .reduceXTicks(false)
      .showControls(true)
      .showLegend(true)
      .staggerLabels(false)

      ;
    chart.xAxis.tickSize(12)            
             .tickFormat(function(d) {
         console.log(d,arguments);
         var date = new Date(d);
               return d3.time.format('%b %y')(date);
             });

    chart.yAxis
       .axisLabel(dataForChart.ylabel)
       .tickFormat(d3.format(''))
       .axisLabelDistance(50);

    d3.select('#chart1 svg')
        .datum(dataForChart)
       .call(chart);

    nv.utils.windowResize(chart.update);


    chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

    return chart;
});


var dataForChart=function(){

       var section1 = new Array();
       section1.key="Section 1";
       section1.values = new Array();
       section1.color="#1F77B4";

       var section2 = new Array();
       section2.key="Section2";
       section2.values = new Array();
       section2.color="#2CA02C";

        for (i=0;i<12;i++){
            date=new Date(2013,i,1);

            section1.values[i] = {"y" : Math.round(2*i*getRandom(1,2)), "x": date};
            section2.values[i] = {"y" : Math.round(6*i+2*getRandom(1,2)), "x": date};
         }

         function getRandom(min, max) 
         {
            return Math.random() * (max - min + 1) + min;
         }

         var dataArray=new Array();
         dataArray.push(section1);
         dataArray.push(section2);

       return dataArray;
};    

</script>

最佳答案

与所有线性轴一样，折线图轴使用刻度线来显示线上的关键点，但不是每个可以想到的值。在许多情况下，如果图表显示每个数据，刻度线会靠得太近以至于标签会重叠并变得不可读。人们希望能够根据到相邻刻度线的距离来估计线上的位置。

相比之下，条形图的 x 值被假定为不同的类别，可能没有自然顺序。它们可以是“苹果”、“橙子”和“香蕉”。无法根据相邻标签(“苹果”和“香蕉”)的值来估计中间值(“橙子”)，因此默认情况下会显示所有标签，即使它们最终重叠且不可读。

但是你的折线图呢？你只有 12 个日期值，所以你有足够的空间来容纳所有标签而不重叠？告诉轴应该包括多少刻度的常规 d3 方法是 axis.ticks() .我看到您试图做类似的事情，但是 axis.tickSize() 方法控制每条刻度线的长度，而不是有多少。但是，axis.ticks() 不适用于 NVD3——内部方法会覆盖您在轴上设置的任何值。

别担心，仍然有办法控制它，但它需要一些额外的代码。 axis.tickValues()方法取代 axis.ticks()，因此您可以使用它来覆盖 NVD3 默认值。

您在 axis.tickValues() 中包含的信息是每个刻度的显式值的数组。由于您的 x 轴值是日期，并且每个月都有一个值，因此您有两种创建此数组的方法:

选项 1:直接从您的数据中获取 x 值。

chart.xAxis.tickValues(ideas.values.map( function(d){return d.x;} ) );

//Array.map(function) creates a new array, where each value is the result of
//calling the function on the corresponding element of the original array.
//Since your data is in ideas.values as an array of {x:date, y:number} objects,
//this method creates an array containing all the dates from your data.

选项 2:使用 d3 time interval计算日期序列的方法。

chart.xAxis.tickValues(d3.time.month.range(
                            new Date("2013 01"),
                            new Date("2014 01"),
                            1)
                        );

//d3.time.month.range(startDate, stopDate, step) creates the sequence of dates
//that are exact month values, starting with the month on or after the startDate 
//and continuing to the last start of month *before* the stop date
//(so it won't include January 2014.  The step value tell it how many months
//to skip at a time; we want every month, so step==1.

//There are similar methods for year, week, day, hour, minute and second, 
//and also versions for weeks starting on specific days of the week;
//Just replace "month" in "d3.time.month.range" with the appropriate interval.
//For plain numbers, use d3.range(start, stop, step).

我希望现在一切都明白了。

关于javascript - d3.js nvd3 x 轴上的日期 : only some dates are show，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21316617/