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

Question

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

我已经进行了广泛的研究，似乎无法很好地解决这个问题。

Answer 1

这里有几件事情要考虑：

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

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

有许多框架可以利用相对相似的数据结构来显示数据。 例如，尽管数据结构不是100％匹配的，但NVD3具有遵循相似模式的各种图表。

为了更好地说明，这是一个小提琴，请注意，在将数据发送到条形图功能之前，必须对条形图数据进行一些操作（可能由于多个条形图功能）：

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/