Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example stepper / play / pause
const React = require('react');
const D3Component = require('idyll-d3-component');
const d3 = require('d3');
const size = 600;
class CustomD3Component extends D3Component {
initialize(node, props) {
const svg = this.svg = d3.select(node).append('svg').attr('width', 500).attr('height', 500);
this.text = svg.append('text').style('font-size', 30).style('fill', 'blue').attr('dx', 100).attr('dy', 100).text(props.index);
}
update(props) {
if (props.playing) {
setTimeout(() => {
this.props.updateProps({ index: props.index + 1 })
}, 250);
} else {
}
this.text.text(props.index);
}
}
module.exports = CustomD3Component;
[var name:"isPlaying" value:false /]
[var name:"index" value:0 /]
[button onClick:` isPlaying = !isPlaying ` ][display value:` isPlaying ? "Pause" :"Play" ` /][/button]
[button onClick:` index = index - 1 ` ]previous[/button]
[button onClick:` index = index + 1 ` ]next[/button]
[Range value:index min:0 max:10 /]
[display var:index /]
[br /]
[display var:isPlaying /]
[CustomD3Component index:index playing:isPlaying /]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.