Question

我试图修改nvd3中的Line Plus Bar chart，以便在点击按钮时，图表会切换到一周中不同日期（周日至周六）的数据。

现在我无法让它显示一周中某天的数据;它出于某种原因显示一周中的所有日子。这是我的代码：

d3.json("employee_data.json",function(error,data) {
  if(error) return console.warn(error);
  nv.addGraph(function() {
      var chart = nv.models.linePlusBarChart()
            .margin({top: 30, right: 60, bottom: 50, left: 70})
            //We can set x data accessor to use index. Reason? So the bars all appear evenly spaced.
            .x(function(d,i) {
              console.log(i)
              return i })
            .y(function(d,i) {
              return d[1] })
            ;

      chart.xAxis.tickFormat(function(d,i) {
        var dx = data[0].values[i] && data[0].values[i][0] || 0;
        return 'Sun' + dx
      });

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

      chart.y2Axis
          .tickFormat(function(d) { return d3.format(',f')(d) });

      chart.bars.forceY([0]);

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

      nv.utils.windowResize(chart.update);

      return chart;
  });

});

JSON的设置方式类似于：

[
  {
    "key" : "Sun_Employees",
    "bar" : true,
    "color" : "#ccf",
    "values" : [[0,2],[1,2],[3,2],[4,3],...,[23,1]]
  },
  {
    "key": "Sun_Tasks",
    "color" : "#333",
    "values" : [[0,5],[1,6],[2,5],[3,7],...,[23,2]]
  },
  {
    "key" : "Mon_Employees",
    "bar" : true,
    "color" : "#ccf",
    "values" : [[0,2],[1,2],[3,2],[4,3],...,[23,1]]
  },
  {
    "key": "Mon_Tasks",
    "color" : "#333",
    "values" : [[0,5],[1,6],[2,5],[3,7],...,[23,2]]
  }
}

我认为这个问题与.x（函数（d，i）{return i}）行有关，但我不知道如何限制它。

Answer 1

尝试在将数据绑定到您的选择之前过滤数据。这看起来像是：

var filteredData = data.filter(function(d) { return d.key.startsWith("Sun"); });
d3.select('#chart svg')
  .datum(filteredData)
  ...

使用d3在同一JSON文件中使用多个数据集

1 个答案: