Adding material to an imported plot

Community Help
1

Suppose I import an interesting visualization:

import {chart} from "@d3/histogram"

Now I want to add additional stuff to the chart. Like, for example, I want
to mess up the beautiful histogram with a big circle. I can do the following:

d3.select(chart).selectAll('circle').data([({x:100,y:100,r:100})]).enter().append('circle').attr('cx',d=>d.x).attr('cy',d=>d.y).attr('r',d=>d.r).attr('fill','blue')

and this will stick a big blue circle on the histogram. However, if I edit the cell and change the color ‘blue’ to ‘green’, the circle on the histogram doesn’t change color.

I understand that this has to do with the computational flow – the displayed graph doesn’t know that it depends on the cell that sets the circle’s color – but I can’t figure out what the right way to do this is!

Thanks for any tips.

2

use selection.join?

1 Like
3

That works! I will read up on selection.join – Thanks!

4

I think I understand now – the .enter().append() construction
added a new circle on its first run through. But after that, .enter() doesn’t have anything in it because there’s already a circle there; so the subsequent calls don’t do anything. With join, the circle already there gets removed (as part of .exit()) and the new circle gets appended.

Is this the idea?

1 Like
5

yes that’s it exactly!