plotD3.break_down plots within tabs apart from active tab do not load/size correctly

I have a Rmarkdown document with some tabs, each of which has a breakdown plot. However, on all non-active tabs, the plot has been rendered where it appears to be shifted to the left of screen, cutting off the y-axis.

I note that this issue is occurs because the ability for the plot to re-render on window resize has been overwritten. Perhaps a simple-ish fix would be to provide a boolean to allow for window-resizing where required?

Hi,

Could you provide a minimal Rmarkdown example for me to run, so I can inspect this issue?

See reprex below (the format is a bit messed up due to code-chunk formatting from RMD):

---
title: "plotD3 on tabs example"
author: "Author"
date: "2020-10-07"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)

library("DALEX")
library("iBreakDown")

titanic <- na.omit(titanic)
set.seed(1313)
titanic_small <- titanic[sample(1:nrow(titanic), 500), c(1,2,6,9)]
model_titanic_glm <- glm(survived == "yes" ~ gender + age + fare,
                       data = titanic_small, family = "binomial")
explain_titanic_glm <- explain(model_titanic_glm,
                           data = titanic_small[,-9],
                           y = titanic_small$survived == "yes",
                           label = "glm")

## A Group of Tabs {.tabset}

### Tab 1

```{r tab-1}
bd_glm_1 <- break_down(explain_titanic_glm, titanic_small[1, ])
plotD3(bd_glm_1)

### Tab 2

```{r tab-2}
bd_glm_2 <- break_down(explain_titanic_glm, titanic_small[2, ])
plotD3(bd_glm_2)

### Tab 3

```{r tab-3}
bd_glm_3 <- break_down(explain_titanic_glm, titanic_small[3, ])
plotD3(bd_glm_3)

I added the reload argument to change the onResize behaviour. It still looks somewhat off but works.

### Tab 2

```{r tab-2}
bd_glm_2 <- break_down(explain_titanic_glm, titanic_small[2, ])
plotD3(bd_glm_2, reload = TRUE)
\```

When you say it looks somewhat off, are you referring to the different widths of the plot? It might help if you change the plot width definition to consider the margin widths.

i.e. in inst/d3js/breakDownD3.js, consider changing from plotWidth = 420 * 1.2 to something like plotWidth = width - margin.right -margin.left or similar, with width set to some default argument. This will allow the final plots to maintain the same overall dimensions between tabs I think.

Actually, this was implemented a long time ago, and the aim was for vertical gridlines to start and end the plot.

iBreakDown/inst/d3js/breakDownD3.js

Lines 93 to 97 in 8eb9d1e

    
           // effort to make grid endings clean 
        
           let str = xGrid.select('.tick:first-child').attr('transform'); 
        
           let yGridStart = str.substring(str.indexOf("(")+1,str.indexOf(",")); 
        
           str = xGrid.select('.tick:last-child').attr('transform'); 
        
           let yGridEnd = str.substring(str.indexOf("(")+1,str.indexOf(","));

Their position is automatically computed by D3.js so the lazy solution was to cut the graph where the grid lines end; then move labels/title accordingly. Not sure if there is a better one.

	// effort to make grid endings clean
	let str = xGrid.select('.tick:first-child').attr('transform');
	let yGridStart = str.substring(str.indexOf("(")+1,str.indexOf(","));
	str = xGrid.select('.tick:last-child').attr('transform');
	let yGridEnd = str.substring(str.indexOf("(")+1,str.indexOf(","));