0

I am working on implementing some D3.js visualizations in a Shiny App through the r2d3 package.

I have some text and a d3Output() in the same fluidRow, when I run the Shiny App, the text & the bar do not get outputted on the same row. See here: Shiny App Output

Upon further inspection - I see that the div container created by the d3Output() function contains a margin extending to the end of the row. See here: div margin

I would like to understand if its possible to get both the text "fluidRow with Bar" and the d3Ouput() to print on the same row. Is it possible to remove the margin created by the d3Output()'s div container?

Please find some minimal reproduceable code below

library(r2d3)
library(shiny)

ui <- fluidPage(
    fluidRow('Some text in first fluidRow'),
    fluidRow('fluidRow with Bar', d3Output('d', width = '400px', height = '30px'))
)

server <- function(input, output, session) {

    output$d <- renderD3({
        r2d3(data=25, script = "chart.js")

    })
}

shinyApp(ui, server)

chart.js

var t1Bar = 400;  //width
var t2Bar = data * 4; // data is value between 0 & 100
var t1Color = '#D5D7D2';
var t2Color = '#75DF0A';

svg.attr('width', 400);
svg.attr('height', 30);


// Right to Left
svg.append('rect')
    .attr('id', 't1')
    .attr('width', 0)
    .attr('x', t1Bar)
    .attr('y', 0)
    .attr('height', 30)
    .attr('fill', t1Color);

// Left to Right
svg.append('rect')
    .attr('id', 't2')
    .attr('width', 0)
    .attr('x', 0)
    .attr('y', 0)
    .attr('height', 30)
    .attr('fill', t2Color);

// Transitions
svg.select('#t1')
    .attr("x", t1Bar)
    .transition()
    .delay(0)
    .duration(500)
    .attr("width", t1Bar - t2Bar)
    .attr("x", t2Bar)

svg.select('#t2')
    .transition()
    .delay(0)
    .duration(500)
    .attr('width', t2Bar);
hzkm
  • 1

0 Answers0