UNPKG

d3.chart

Version:

A framework for creating reusable charts with D3.js

53 lines (45 loc) 2.11 kB
# d3.chart migration guide ### From 0.2 to 0.3 - Change configuration from AMD- and CommonJS-enabled environments. d3.chart is now defined using the Universal Module Definition ("UMD") pattern, facilitating more natural consumption from projects that are structured according to the AMD or CommonJS module formats. - AMD projects should now define an entry to the "paths" configuration for "d3.chart" (a "shim" configuration is no longer necessary). - CommonJS projects may now include d3.chart directly via `require('d3.chart')`. - No change is required in projects that include `d3.chart` via an HTML `<script>` tag. - In all cases, this library will continue to define a new property on the object exposed by the `d3` module. ### From 0.1 to 0.2 - Update chart definitions: - Remove all but the first argument to the `initialize` method. (This may requiring refactoring the first argument to support multiple values via a generic "options" object.) - Modify usage of the `Chart#mixin` method: - Change references to the `Chart#mixin` method to `Chart#attach`. - Instead of invoking with a Chart constructor name, a d3 selection, and options for the chart constructor, first instantiate a chart explicitly and invoke with a unique instance name and the new chart instance. Example: ```diff d3.chart('ExampleChart', { - initialize: function(arg1, arg2) { + // If your Chart's `initialize` method has to be changed in this way, don't + // forget to also update the usage of the chart. + initialize: function(options) { - this.mixin('OtherChart', this.base.append('g'), { - exampleAttribute: 'value' - }); + // Create the chart explicitly + var otherChart = this.base.append('g').chart('OtherChart', { + exampleAttribute: 'value' + }); + // Use `Chart#attach` to activate the behavior previously controlled via + // `Chart#mixin`--the specified Chart's `draw` method will be + // automatically invoked when you call this chart's `draw` method. + this.attach('otherChart', otherChart); } }); ```