In my package dndTree I use htmlwidgets to render drag-and-drop diagonal trees as implemented here. I changed the original code to be one big function makeTree(treeData,el) where treeData is JSON (created from jsonlite) and el is the element passed in from HTMLWidgets.
In the examples I saw online the way for setting the size of the d3 block was:
var width = el.getBoundingClientRect().width;
var height = el.getBoundingClientRect().height;
var tree = d3.layout.tree()
.size([height, width]);
This method worked fine for making the graph in the RStudio viewer and even popping it out to the browser. However, when using the included Shiny hooks, the el.getBoundingClientRect().height returned 0 (I checked with a console.log(height);). The width responded appropriately using the shiny hooks but I couldn't do anything to get the height to respond to inputs.
I took it a step further back and in the file dndTree.js in the initialize step I included a console log:
initialize: function(el, width, height) {
console.log(height);
return{}
}
which also returned a 0 for height.
Ultimately I added another argument to the function that makes the tree, fHeight which, if the bounding rectangle reports a height of 0 sets the height to fHeight. This isn't a good solution though because now there are two apparent height controllers but only one works and it only works when supplying the number of pixels as a number.
Why does the el element have a height of 0 when using the default shiny hooks?
This is my first attempt at using htmlwidgets and I'll be very honest that I've never written d3 from scratch. I've been taking working examples and trying to make it into a usable widget. My package code is on github (https://github.com/bmewing/df2hjson), but hopefully the relevant nuggets here are enough to identify my mistakes.
