Cannot center circlepackeR-generated plot in Shiny app

[olyerickson]

trafficstars

We need to center (horizontally) a circlepackeR plot on a web page in a Shiny app. None of the "usual" Shiny tricks for centering --- columns in fluidrow, etc --- seem to work. Even forcing a text-align:center in the parent <div> of the <svg> does not seem to work.

Please advise!

[olyerickson]

Using an in-browser debugger, I've determined that the svg transform parameters must be fiddled with. For example, if my width and height are 1050px, the default will be: <svg transform="translate(525,525)">

But to center the svg on my 1680px page, I actually need: <svg transform="translate(840,525)">

Forcing this offset in the debugger works. I'm wondering if there is a way to pass an offset through from the R call?

[olyerickson]

Ultimately, this looks like a problem with how htmlwidgets generates the <g> object; in that code, no clear way to pass through a transformation object

[jeromefroe]

Hi! As you noted, it seems the crux of the problem is that the x and y dimensions are translated with the same value, which is probably not appropriate for screens which are not squares:

diameter = Math.min(el.getBoundingClientRect().width,
                    el.getBoundingClientRect().height);

var svg = d3.select(el).append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

Would the following work for you?

var svg = d3.select(el).append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(" + el.getBoundingClientRect().width / 2 + "," + el.getBoundingClientRect().height / 2 + ")");

Unfortunately, I don't have the cycles to actively maintain the package anymore, but I'd be more than happy to take PR's :)

[olyerickson]

Yes, I think that would help! ;)