chart data

Chart: Passing Data

By default, a chart type never works with a a fixed set of data. The whole point of a d3.chart type is to be reusable, which requires a chart to be able to redraw itself when new data is provided to it.

Passing Data

To pass data to your chart instance, call the draw method with the appropriate data

var myChart = d3.select("#container")
  .append("svg")
  .chart("BarChart")
  .width(110);

var data = [1,3,24,45];
myChart.draw(data);

Note that you can change the data displayed by the chart by simply calling draw again with your updated data. The draw method will go through each layer and render it appropriatly by calling its dataBind and insert methods as well as any appropriate lifecycle events.

Transforming Data

When creating a chart constructor, we may want to modify the data or other properties on the chart based on the data to be drawn. For example:

1. We're drawing some statistics that are based on the data, meaning we need to be able to recalculate them somewhere before the layers are drawn
2. We have some scales that map the data extent to a drawable surface, and we need to adjust our scales' domain.

When defining a chart constructor, one can define a transform method that will be called once before all layers' and attached charts' draw methods are called. The transform method must returned the updated data and it will be passed to those draw methods.

d3.chart("ChartType", {
  
  initialize: function() {
    this.xScale = d3.scale.linear();
  },
  
  transform: function(data) {
    
    // adjust our scale
    this.xScale.domain(d3.extent(data.values));

    // pass only the values to the actual draw methods.
    return data.values;
  }
});

var myChart = d3.select("#container")
  .append("svg")
  .chart("ChartType")
  .width(110);

myChart.draw({ values : [1,2,4,5,10] });

The transform method will be called once for every chart.draw call.