Published unlisted
Edited
Jan 1, 2021
Insert cell
Insert cell
Insert cell
Changed in fork
chart = { const svg = d3 .create('svg') .attr('class', 'chart-test') .call(setSize, width, 100);
+
const g = svg.append('g');
-
g.selectAll('.node') .data(data) .join(enterNode, updateNode, n => n.remove());
+
let node = g.selectAll();
invalidation.then(() => console.log('invalidated'));
-
return svg.node();
+
return Object.assign(svg.node(), { update(data) { scaleRadius.domain([d3.min(data, d => d.value), d3.max(data, d => d.value)]); scaleX.domain([0, d3.max(data, d => d.id)]); node = node.data(data, d => d.id).join(enterNode, updateNode); } });
}
Insert cell
Added in fork
chart.update(data)
Insert cell
mutable data = d3.range(10).map((_, i) => ({ id: i, value: i }))
Insert cell
Changed in fork
-
onShuffle = () => { mutable data = data.map(v => ({ ...v, value: Math.random() * 10 })); }
+
onShuffle = () => mutable data = data.map(v => ({ ...v, value: Math.random() * 10 }))
Insert cell
Changed in fork
scaleRadius = d3 .scaleLinear()
-
.domain([d3.min(data, d => d.value), d3.max(data, d => d.value)])
.range([10, 25])
Insert cell
Changed in fork
scaleX = d3 .scaleLinear()
-
.domain([0, d3.max(data, d => d.id)])
.range([30, width - 30])
Insert cell
enterNode = node =>
node
.append('circle')
.attr('class', 'node')
.attr('data', d => d)
.call(tr =>
tr
.call(setCoords, (d, i) => [scaleX(d.id), 30])
.attr('fill', 'black')
.attr('r', 0)
.transition(200)
.attr('r', d => scaleRadius(d.value))
)
Insert cell
// it appears update does not work for mutable data
updateNode = node =>
node.call(tr =>
tr
.transition(200)
.attr('fill', 'red')
.call(setCoords, d => [scaleX(d.id), 30])
.attr('r', d => scaleRadius(d.value))
)
Insert cell
import { setCoords, setSize, trans2d } from '@rabelais/tree-utils'
Insert cell
d3 = require('d3@v6.3.1')
Insert cell