当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Combining Multiple D3 Charts of Different Types

问题描述:

I have multiple charts - an interactive line chart, a couple of bar charts, and a pie chart. Is there a framework where I can combine all the charts into one framework and allow me to toggle between charts?

I've looked extensively and there doesn't seem to be a good answer to addressing this question.

网友答案:

There are a few things to consider here:

  • The framework would need to take data structured in the exact same way for each chart
  • Bar and Graph charts display similar data (proportional data)
  • Line charts typically display data over time

That being said, I think it is unlikely that a framework would implement all three charts in a way that could be toggled.

There are plenty of frameworks that display data utilizing a relatively similar data structure. For example, NVD3 has a variety of charts that follow similar patterns, though the data structures aren't a 100% match.

Here's a fiddle to better explain, note that the Bar Chart data has to be manipulated a bit before sending data to the bar chart function (likely due to the multiple bar chart functionality):

JS Portion:

// 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;
});

Full demo:

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

分享给朋友:
您可能感兴趣的文章:
随机阅读: