grizzly_vizdom 0.0.2-dev grizzly_vizdom: ^0.0.2-dev copied to clipboard
Fluent data driven documents based selection and data-join API for HTML DOM
VizDOM #
Fluent data driven documents based selection and data-join API for HTML DOM
Examples #
Selection #
TBD
Transition #
Control #
void main() {
final anim = new AnimationBuilder().duration(120000).fillForwards()
..createAt(0.0).translateX(0)
..createAt(1.0).translateX(1000);
select('#root')
.selectAll('div')
.style('background-color', 'red')
.transition('anim1')
.animateWithBuilder(anim);
querySelector('#btn-cancel').onClick.listen((_) {
select('#root').selectAll('div').transition('anim1').cancel();
});
querySelector('#btn-start').onClick.listen((_) {
select('#root')
.selectAll('div')
.transition('anim1')
.animateWithBuilder(anim);
});
querySelector('#btn-reverse').onClick.listen((_) {
select('#root').selectAll('div').transition('anim1').reverse();
});
querySelector('#btn-finish').onClick.listen((_) {
select('#root').selectAll('div').transition('anim1').finish();
});
querySelector('#btn-pause').onClick.listen((_) {
select('#root').selectAll('div').transition('anim1').pause();
});
querySelector('#btn-play').onClick.listen((_) {
select('#root').selectAll('div').transition('anim1').play();
});
}
TODO #
Selection #
- Bound data must be separate for each group
- insertBound in
BoundSelection
- Lower
- Raise
- forEach
- filter
- size
- non-null size
- Events
Transition #
- Cancel
- active
- onFinish
- chain
SVG #
- svg
- Line
- Group