<head>
<!-- Enable <d3-worker> tag -->
<script src="../dist/d3-worker-wrapper.js" type="text/javascript"></script>
</head>
<d3-worker renderer="../dist/test_render.js" type="json" source="../test/cor.json">
<set name="sortBy" value="name" />
</d3-worker> <!-- repeated 4 times in example -->// test_render.js
export class Render extends BaseRenderer {
constructor() {
super();
this.register();
}
sizeHint(size) { /* tell the host chart its dimensions to reflow */ }
load(data) { /* fetch data for rendering from *source* */ }
render(config) { /* draw witn d3 here */ }
}
new Render();This library does rendering of the d3 chart in two stages:
- Worker stage. Renders SVG in a background process into fake-DOM.
- Component stage. Now SVG is subdued to the real-DOM component and requires only updates, which are fast.
Both stages share the same renderer code.
The point is to allow interaction with some d3 charts while other d3 charts are being loaded and rendered, the first time slowly.
It's still a work in progress package, any contributions or critique would be appreciated!
npm install d3-workerJust use the <d3-worker> tag as above and include dist/d3-worker-wrapper.min.js in your html file.
Settings can be passed to renderer script by <set> tag.
There's an example in /docs:
- index.html
- renderTest.js
run server from package root, go to http://localhost:8000/docs
- Web Components support in browser (turn it on in FireFox by setting dom.webcomponents.enabled=true, dom.webcomponents.customelements.enabled=true)
- nodom library for fake-DOM (using forked version)
- D3 library
- Spin.js library for nice spinner
- rollup for building
There're two things can have negative affect on performance:
- serializing and de-serializing of the fake-DOM.
- layout reflow when inserting fake chunk received from worker.
The latter is resolved by means of Shadow DOM ability to encapsulate its contexts read here about CSS Containment.
The side effect is you have to provide size hint for component manually. Otherwise, when size is being calculated naturally, e.g. regarding with the content have been generated by d3, the reflow time taken cancels all the positive effects of parallel processing.
- Remove duplication of d3 library code base for wrapper & renderer
- Fix config passed to render
- component.updateFinished event
- cleanse workers
- Use class instead of ugly renderer boilerplate
- Custom shadow DOM Styles
- Render to raster. Requires Offscreen Canvas feature
- Make sane ES6 exports
- Replace eval() with dynamic import()
- Import thru <link rel="import">
- Zero-copy transfer from worker
- Provide wrap() for usage without components
- Add docs
- Test with polyfill