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

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

---

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

< P> >这里有一些事情要考虑：

• 该框架需要为每个图表采用完全相同的数据结构
• 条形图和图表显示类似的数据（比例数据）
• 折线图通常随时间显示数据

尽管如此，我认为一个框架不太可能以一种可以切换的方式实现所有三个图表

有很多框架使用相对相似的数据结构来显示数据。例如，尽管数据结构不是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;
});

完整演示：

---

这就是你想要的吗？你在两者之间切换是什么意思？就像按左/右箭头，然后转到另一个图表？好吧，只要有任何东西可以让我在图表之间切换，我就会查看它！