1

I am searching for a way to bind a d3 plot to a shiny app. The hintch is: The plot gets created dynamically on the javascript side. The trigger for the creation of the plot on the other side comes from the shiny app. How it works.

That means, something in the ui.R like includeHTML("someJsWithPlot.js") won't work (as described here), because the plot will be displayed upon user interaction, after the index.html is created.

I tried this on the ui.R side

tags$div(id = "#fromJs")

And this on the .js side

var w = 100;
var h = 100;
var test = d3.select("#fromJs").append("text")
  .attr("width", w)
  .attr("height", h);

test.append("text")
 .text("Foobar")
 .attr("x",10)
 .attr("y",15);

That works! The text gets displayed in the div I created! My idea was to replace the text with the plot. For a starter, I tried to replace it with a simple circle, but that does not work. Nothing gets displayed (nor an error thrown in the console).

var w = 100;
var h = 100;

var test = d3.select("#fromJs").append("svg")
  .attr("width", w)
  .attr("height", h);

test.append("svg")
 .attr("x", 10)
 .attr("y", 15)
 .attr("r", 20);

I also found this, but I do not find much on shiny.OutputBinding(), except this or this. The latter one is not understandable to me.

Bottom line: How do I access a costum div from the js side? There seems to be a workaround, but that looks like a hack... I am bit clueless where to start. Any hints?

Community
  • 1
  • 1
four-eyes
  • 10,740
  • 29
  • 111
  • 220

0 Answers0