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/

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

1 个答案: