2016-06-20 18 views
1

矩形の変更「高さ」属性は、私はR Shiny -appでgvisTimelineを使用します。R光沢:gvisTimeline

library(shiny) 
library(googleVis) 

ui <-fluidRow(
    tags$head(
    tags$script(src="https://d3js.org/d3.v3.min.js", {{ suppressDependencies("d3") }}) 
), 
    htmlOutput("timeline") 
) 

server <- function(input, output) { 

dat <- data.frame(Term=c("1","2","3"), 
        President=c("Whashington", "Adams", "Jefferson"), 
        start=as.Date(x=c("1789-03-29", "1797-02-03", "1801-02-03")), 
        end=as.Date(x=c("1797-02-03", "1801-02-03", "1809-02-03"))) 

output$timeline <-renderGvis({ 
        gvisTimeline(data=dat[,-1], rowlabel="President", 
        start="start", end="end") 
      }) 
    } 

shinyApp(ui, server) 

私は真ん中の長方形の高さを変更したいと思います。

d3.select('svg:nth-child(1) g:nth-child(5) rect:nth-child(2)') 
.attr('height', 42) 
.attr('y', 40); 

はどのようにして所望の高さと最初からy座標で、この1つの長方形を得るために光沢のあるアプリにこのコードをintergrateすることができます:私はJavaScriptコンソールに適切なsvg要素を選択することによって、これを達成しますか?ご協力ありがとうございました!

答えて

2

問題は、ページが読み込まれてから数ミリ秒後にタイムラインがGoogleサーバーから転送されることです。この転送が行われた後、つまりページが初期化されてから50〜500ミリ秒後にJavaScriptコードを実行する必要があります。次のコードは50msごとに実行しますが、動作は完璧とはほど遠いです。 UIで

  1. 、あなたはダミー出力 "uiOutput(" timelineAdjustment ")" が必要です。サーバーで

    uiOutput("timelineAdjustment") 
    
  2. を、あなたは次のように定義する必要があります。

    autoInvalidate50msec <- reactiveTimer(50, session) 
    output$timelineAdjustment <- renderUI({ 
        autoInvalidate50msec() 
        HTML("<script type='text/javascript'>d3.select('#timeline svg:nth-child(1) g:nth-child(5) rect:nth-child(2)').attr('height', 42).attr('y', 40);</script>") 
    }) 
    

また、ページがロードされた後に1回(1000ms)実行すれば同等の定義が得られます。

output$timelineAdjustment <- renderUI({ 
    HTML("<script type='text/javascript'>setTimeout(function() { d3.select('#timeline svg:nth-child(1) g:nth-child(5) rect:nth-child(11)').attr('height', 41).attr('y', 41); },1000);</script>") 
}) 

これを達成するより良い方法があれば、私は聞いてうれしいですね!

関連する問題