This is a guide for those who are familiar with d3 and wish to use d3 in the idiomatic way, as opposed to relying on React to handle DOM updates.
Idyll defines a custom D3Component that you can use to create a custom d3 component.
To use it, create a class that extends from it, and implements two methods: initialize,
and update.
and in your index.idl file, instantiate the component like this:
Any properties provided will be available on the props object in the component.
The initialize function is called only once when your component first mounts. Use this function to create any necessary DOM elements and render your component with the initially provided properties.
This function is called any time the props object changes. Use this function e.g. to update your component when bound data changes.
The circle at the top of this post is adapted from , which was inspired by (Dave Whyte often publishes under the handle ).
To use the block, I can just stick the code into the initialize function. Since this doesn't take any user
input or have dynamic properties, I can omit the update function altogether.
The only changes I've made were to make the radius of the circle dynamic, and to
insert an <svg> element instead of expecting one to be on the page already.
To make this work, I've adapted code from this and added a property to determine the node color. Since this example uses a draw loop to render to canvas, I can simply read the node color property each loop. The final piece to make it work smoothly is to ensure that the draw loop is triggered every time the properties update.
Read more about Idyll at , or .