组合多个不同类型的 D3 图表

Question

我有多个图表 - 一个交互式折线图、几个条形图和一个饼图。是否有一个框架可以将所有图表组合到一个框架中并允许我在图表之间切换？

我进行了广泛的研究，似乎没有一个很好的答案来解决这个问题。

Answer 1

这里有几点需要考虑：

• 框架需要为每个图表以完全相同的方式获取结构化数据
• 条形图和图表显示相似数据（比例数据）
• 折线图通常显示一段时间内的数据

话虽如此，我认为框架不太可能以可以切换的方式实现所有三个图表。

有很多框架使用相对相似的数据结构来显示数据。例如，NVD3 有各种遵循相似模式的图表，但数据结构并非 100% 匹配。

这里有一个更好的解释，请注意在将数据发送到条形图函数之前必须对条形图数据进行一些操作（可能是由于多个条形图功能）：

JS部分：

// handle on click event
d3.select('#chartType')
  .on('change', function() {
    var newData = d3.select(this).property('value');
      if (newData === 'pie') {
          d3.select('#bar-chart').style('display', 'none');
          d3.select('#pie-chart').style('display', 'block');
      } else if (newData === 'bar') {
          d3.select('#bar-chart').style('display', 'block');
          d3.select('#pie-chart').style('display', 'none');
     }
});

function exampleData() {
    return  [
        { 
            "label": "One",
            "value" : 29.765957771107
        } , 
        { 
            "label": "Two",
            "value" : 0
        } , 
        { 
            "label": "Three",
            "value" : 32.807804682612
        } , 
        { 
            "label": "Four",
            "value" : 196.45946739256
        } , 
        { 
            "label": "Five",
            "value" : 0.19434030906893
        } , 
        { 
            "label": "Six",
            "value" : 98.079782601442
        } , 
        { 
            "label": "Seven",
            "value" : 13.925743130903
        } , 
        { 
            "label": "Eight",
            "value" : 5.1387322875705
        }
    ];
}

nv.addGraph(function() {
  var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true);

    d3.select("#pie-chart svg")
        .datum(exampleData())
        .transition().duration(350)
        .call(chart);

  return chart;
});

nv.addGraph(function() {
  var chart2 = nv.models.discreteBarChart()
      .x(function(d) { return d.label })    //Specify the data accessors.
      .y(function(d) { return d.value })
      .staggerLabels(true)    //Too many bars and not enough room? Try staggering labels.
      .tooltips(false)        //Don't show tooltips
      .showValues(true);

  d3.select('#bar-chart svg')
  .datum([{
      key: "Cumulative Return",
      values: exampleData()
      }])
      .call(chart2);

  nv.utils.windowResize(chart2.update);

  return chart2;
});

完整演示：

http://jsfiddle.net/spanndemic/6vke2mLt/