d3.js - 如何在 nvd3.js multiBarChart 的轴上设置域和比例

Question

在 d3.js 中，您可以设置 x 轴以使用 d3.time.scale() 然后设置 x.domain([start_date, end_date]) 及其将用 0 值“填充”数据中不存在的任何缺失日期。我想对 nvd3.js multiBarChart 执行相同的操作。

此代码(可以直接粘贴到 http://nvd3.org/livecode/#codemirrorNav 中)显示按年份列出的总数的条形图，缺少 2002 年和 2003 年的值。我想将比例设置为 d3.time.scale() 然后是数据集第一年和最后一年的域，因此缺失的年份会自动添加 0 值。我该怎么做？

nv.addGraph(function() {
    var chart = nv.models.multiBarChart();

    chart.xAxis
        .tickFormat(function(d){ return d3.time.format('%y')(new Date(d)); });

    chart.yAxis
        .tickFormat(d3.format(',f'));

    chart.reduceXTicks(false);
    chart.showControls(false);

    var data = [{
      'key': 'GB by year',
      'values': [
        {x: new Date().setFullYear('2001'), y: 0.12},
        {x: new Date().setFullYear('2004'), y: 0.03},
        {x: new Date().setFullYear('2005'), y: 0.53},
        {x: new Date().setFullYear('2006'), y: 0.43},
        {x: new Date().setFullYear('2007'), y: 5.5},
        {x: new Date().setFullYear('2008'), y: 9.9},
        {x: new Date().setFullYear('2009'), y: 26.85},
        {x: new Date().setFullYear('2010'), y: 0.03},
        {x: new Date().setFullYear('2011'), y: 0.12}
      ]
    }];        

    d3.select('#chart svg')
        .datum(data)
      .transition().duration(500).call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

Answer 1

根据上面的答案，您可以使用数字 x 值(不是日期对象)以及强制 X 范围和指定的刻度值......对于某些类型的图表来执行此操作。

条形图似乎没有这个功能，但是 nvd3.lineCharts 可以做你想做的事。 multiBarChart 模型不允许使用forceX 函数(现在，曾经吗？)。

解决您的问题的方法是填写 0 或使用顺序图表类型(例如 lineChart)

nv.addGraph(function() {
  var chart = nv.models.lineChart()
      .forceX(2001,2011);

  var tickMarks = [2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011]

  chart.xAxis
      .tickValues(tickMarks)
      .tickFormat(function(d){ return d });

  chart.yAxis
      .tickFormat(d3.format(',f'));

  var data = [{
    'key': 'GB by year',
    'values': [
      {x: 2001, y: 0.12},
      {x: 2004, y: 0.03},
      {x: 2005, y: 0.53},
      {x: 2006, y: 0.43},
      {x: 2007, y: 5.5},
      {x: 2008, y: 9.9},
      {x: 2009, y: 26.85},
      {x: 2010, y: 0.03},
      {x: 2011, y: 0.12}
    ]
  }];        

  d3.select('#chart svg')
    .datum(data)
    .transition().duration(500).call(chart);

  nv.utils.windowResize(chart1.update);

  return chart;
});