(9) Using the D3 library within a custom widget
In MashZone version 10.2 and earlier D3 version 3.3.13 was used (this version will be referred to as D3V3). In MashZone version 10.3 the used D3 library was updated to version 5.0.0 (this version will be referred to as D3V5). As existing custom widgets might use the D3V3 library still, MashZone now supports both versions D3V3 and D3V5 in parallel.
Exposing the API
As the D3 library uses the global variable "window.d3" to make itself available for usage, both the versions are trying to assign themselves to "window.d3". In order to run both D3 versions in parallel, the following adjustments where done:
- The D3V3 library was not modified and still uses the global variable window.d3 to make itself available
- The D3V5 library is assigning itself to the global variable window.d3v5 instead of window.d3
- An API was exposed to fetch the required D3 version from the available D3 libraries
Using the API
MZNG.Viz.getD3Instance is now available in the custom widget framework and can be used as follows:
In case a custom widgets runs with D3V3, no code update is necessary.
In case a custom widgets is supposed to run with D3V5 please use d3 as a local variable to hold the latest D3V5 library. Example: d3.selectAll("rect")
D3V3 will most probably be removed in future versions of MashZone NG. Updating custom widgets to D3V5 is recommended.
Read in this series:
- (0) Custom widgets introduction and prerequisites
- (1) Creating a simple custom widget
- (2) Setting up data assignment
- (3) Configuration of assigned columns
- (4) Configuration of thresholds
- (5) Selection handling
- (5a) Multiple selection handling
- (6) Using filters
- (7) Creating actions
- (8) Enable multi-language support
- (9) Using the D3 library within a custom widget - Current tutorial