Open AWKruijt opened 5 years ago
Just found this, which I think is the same issue: https://stackoverflow.com/questions/44348963/replace-existing-r-shiny-htmlwidget-data-with-new-data
The responses there didn't help me much though :/ I suspect that each call to r2d3 creates a new htmlwidget (each of them using the same set of bindings? given that the old instances respond to new input too?) and that what's needed is to delete either just the old widget or the widget plus the bindings from within shiny before making a new call to r2d3 - correct?
This is 6 months late, but it might help someone else with the same question. I think your problem is in your d3 script. For each draw-iteration you add points and lines, and you should also remove unused values from the prior iteration. The d3 update pattern (https://bl.ocks.org/mbostock/3808218) shows a select, then a data join, then a merge, then a remove. In my limited experience r2d3 doesn't make good use of the merge function so I find just the select, join, and remove to be the way to go, and (maybe incorrectly) I just go ahead and remove all elements before drawing new ones for each iteration. for example, your lines are:
focus.selectAll('lines')
.data(dById)
.enter().append("path")
.attr("class", "line")
.attr("d", function(d) {
return connectLine(d.values);
})
.attr("stroke", function(d) {
return color(d.key);
})
.attr('stroke-width', 4);
To clear all existing lines and draw new ones you could try:
// start with the svg object provided by r2d3
svg.selectAll('lines').remove();
focus.selectAll('lines')
.data(dById)
.enter().append("path")
.attr("class", "line")
.attr("d", function(d) {
return connectLine(d.values);
})
.attr("stroke", function(d) {
return color(d.key);
})
.attr('stroke-width', 4);
You might be able to simplify this even more by removing all g
elements at the top of your d3 script.
Hi all,
first of, thanks! r2d3 is amazing and inspired me to my first attempts at d3.js: a line graph with draggable points. Now I am trying to incorporate this in a shiny where users can modify various settings. However: it seems that every input made through the shiny inputs results in a new instance of the d3.js plot.... initially I "hackslved' this by giving the plot on opaque background but soon came to realize that all the 'former' instances of the d3.js remain active (and start throwing warnings when the number of pp (input$npp) is changed, because the new data does not fit the old instance's datastructure, which of course eventually leads to clogged up memory.
So: is there a way to reset/reinitialize/shutdownandrestart the d3.js (and its datastructure) within a shiny session?
Many thanks in advance!
Shiny code:
and the js: