Hi everyone! This is my first time using Observable and d3.js, and I am loving it. I am facing an issue that I don’t know how to fix, unfortunately.
When I first created a draft notebook, I was able to create charts that updated dynamically by changing the values of certain parameters using sliders. However, now that I have published the notebook, I find that the values of the parameters no longer update when I use the slider; I have to manually change the value of the parameter inside the code for the slider in order to change the graphs. I did not touch the code for the sliders at all, so I have no idea why they suddenly stopped updating.
Any ideas for why this might be happening, and how I might fix the issue? Many thanks!
If you’ve published the notebook, can you link it here for us, and we’ll take a look at it?
Of course!
https://beta.observablehq.com/@gokulmadhavan/a-visual-introduction-to-queueing-theory
The parameters p, a, and m were all updating via the slider in the draft form of the notebook, but aren’t any more.
Yikes — this is something that we broke with a change that we deployed yesterday. Previously, the html tagged template literal would always return your content in a wrapping div. Now, if you return more than one element (which was the case for your lovely sliders), you get a DocumentFragment back instead. This fragment can’t be used as a viewof, because it dissolves itself as soon as it has been inserted into the DOM.
I’d imagine that we might revisit this change this morning, and potentially restore the old behavior, but in the meantime, here’s a fixed version of the notebook that works around the change by wrapping all of your slider viewofs in <div>s:
https://beta.observablehq.com/@jashkenas/a-visual-introduction-to-queueing-theory
Thank you @jashkenas! This is really helpful. I’ll wait on making edits on my end for now, as I don’t need the notebook to work immediately, but this is great to know. Thank you for being so prompt!
No problem. If I were you, I’d go ahead and add the <div> wrappers to your viewof slider cells now — as I can’t promise you if or when we’ll change the new behavior, and it won’t hurt them even if we do…
Okay that’s great to know. Thank you!
Good news! We just deployed a fix for this.
Now (as before), if your html tagged template literal produces multiple root nodes, we create an implicit wrapper DIV element rather than returning a DocumentFragment. We likewise create an implicit wrapper G element for the svg tagged template literal.
We’ve also disabled rendering of DocumentFragment nodes (again, as before), since this is generally a bad idea due to their self-destructive nature. So long document fragments, you won’t be missed!
Lastly, we now apply trim leading and trailing whitespace for the html and svg tagged template literals. This was already the case for Markdown (md), and since it’s one of the main unexpected causes of multiple root nodes, it seems helpful.