Skip to content
Irene Ros edited this page Apr 23, 2013 · 3 revisions

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 flexable and work with any data of the expected format.

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 new/changed/removed 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.

Remember that the dataBind method is the only method of a layer that has access to the data. You can certainly save it on the chart, but be careful doing that, so that the original draw functionality will always be able to handle a changing data set. This might involve adjusting scales and so on, if they happen to be driven by the data.

Transforming Data

If your data isn't in the correct format, you can define a transform method that will be called before anything is actually drawn on the chart. For example:

d3.chart("ChartType", {
  initialize: function() {
    this.xScale = d3.scale.linear();
  },
  transform: function(data) {
    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 draw call.

Clone this wiki locally