web-dev-qa-db-ja.com

対数目盛の光沢のあるスライダー

私はShinyを使用して、出力に表示するp値を制御する slider を使用して単純なWebアプリケーションを構築しています。

スライダーを線形ではなく対数の目盛りで動作させるにはどうすればよいですか?

現時点で私は持っています:

sliderInput("pvalue",
            "PValue:",
            min = 0,
            max = 1e-2,
            value = c(0, 1e-2)
),

ありがとう!

23
enricoferrero

出力として何が必要か正確にはわかりませんでしたが、可能なp値を[0、0.00001、0.0001、0.001、0.01]にすることでした。少し違うものが必要な場合は、この回答が十分な出発点になることを願っています。

基本的に、最初に数値(0、0.0000.1、...)の値を保持する配列を作成し、次にスライダーのAPIの特別な更新関数を使用して、これらの値をスライダーに固定します。スライダーのAPIの使用方法がわかれば、非常に簡単です。また、何らかの理由でRStudio内でこれを実行すると奇妙に見えますが、ブラウザーでは問題ありません。また、スライダーが初期化された後にこれが実行されることを確認したいので、5msの遅延があることに注意してください。最もクリーンなソリューションではありません。おそらくそれを行うためのより良い方法がありますが、それは機能します。

library(shiny)

JScode <-
  "$(function() {
    setTimeout(function(){
      var vals = [0];
      var powStart = 5;
      var powStop = 2;
      for (i = powStart; i >= powStop; i--) {
        var val = Math.pow(10, -i);
        val = parseFloat(val.toFixed(8));
        vals.Push(val);
      }
      $('#pvalue').data('ionRangeSlider').update({'values':vals})
    }, 5)})"

runApp(shinyApp(
  ui = fluidPage(
    tags$head(tags$script(HTML(JScode))),

    sliderInput("pvalue",
                "PValue:",
                min = 0,
                max = 1e-2,
                value = c(0, 1e-2)
    )
  ),
  server = function(input, output, session) {
  }
))
14
DeanAttali

このスレッドがまだアクティブであるかどうかはわかりませんが、値を上書きするのではなく、ionRangeSliderのprettify関数属性を使用してinputSliderを「ログ化」するより一般的な方法を追加したい場合に備えて、最小、最大、通常どおりinputSliderのステップとデフォルト値を指定すると、Javascript側で発生するのは、表示される値の変更だけです(2つのオプションが表示されます。1つは数値出力用、もう1つは科学的記数法用です)。

library(shiny)

# logifySlider javascript function
JS.logify <-
"
// function to logify a sliderInput
function logifySlider (sliderId, sci = false) {
  if (sci) {
    // scientific style
    $('#'+sliderId).data('ionRangeSlider').update({
      'prettify': function (num) { return ('10<sup>'+num+'</sup>'); }
    })
  } else {
    // regular number style
    $('#'+sliderId).data('ionRangeSlider').update({
      'prettify': function (num) { return (Math.pow(10, num)); }
    })
  }
}"

# call logifySlider for each relevant sliderInput
JS.onload <-
"
// execute upon document loading
$(document).ready(function() {
  // wait a few ms to allow other scripts to execute
  setTimeout(function() {
    // include call for each slider
    logifySlider('log_slider', sci = false)
    logifySlider('log_slider2', sci = true)
  }, 5)})
"

ui <- fluidPage(
  tags$head(tags$script(HTML(JS.logify))),
  tags$head(tags$script(HTML(JS.onload))),

  sliderInput("log_slider", "Log Slider (numbers):",
              min = -5, max = 3, value = -4, step = 1),

  sliderInput("log_slider2", "Log Slider (sci. notation):",
              min = -5, max = 3, value = 1, step = 0.5),

  br(),

  textOutput("readout1"),
  textOutput("readout2")
)

server <- function(input, output, session) {
  output$readout1 <- reactive({
    paste0("Selected value (numbers): ", input$log_slider, " = ", 10^input$log_slider)
  })

  output$readout2 <- reactive({
    paste0("Selected value (sci. notation): ", input$log_slider2, " = ", 10^input$log_slider2)
  })
}

shinyApp(ui, server)

output

12
sebkopf

更新(2018年5月):

これは、shinyWidgets::sliderTextInput()コントロールを介して可能になりました。カスタムステップ(対数間隔など)を指定でき、スライダーはそれらをステップスルーします。欠点は、最大値と最小値ではなく各ステップを指定し、スライダーでステップを計算する必要があることですが、この種のアプリケーションではうまく機能します。

小さな例:

library(shiny)
ui <- fluidPage(
  shinyWidgets::sliderTextInput("pvalue2","PValue:",
                            choices=c(0, 0.0001, 0.001, 0.01),
                            selected=0, grid = T)
)
server <- function(input, output) {}
shinyApp(ui, server)
9
phalteman

質問があまり注目されていない理由は、答えるのが難しいからです。質問者が望むことを行うには、javascriptを記述してWebページに挿入する必要があります。以下は、shinyスライダーを日付として適切にフォーマットするように適合させたコードです。この1つのスクリプトをいじくり回すのに十分なJavaScriptを学習しただけなので、対数用に変更しようとはしませんでした。その後、すぐにメモリから削除して、ブロックの下のバーにある季節のビールメニューなどのより重要なもののためのスペースを確保しました。

Anyhoo:

    output$selectUI <-
        renderUI(
            list(sliderInput(inputId = "target", label = "Date",
                                             min = 0, max = diff_months(targetEnd(),targetStart()) - 1,
                                             value = diff_months(targetEnd(),targetStart()) - 1,
                                             animate = animationOptions( loop = T)),
                     singleton(HTML(
                '
            <script type="text/javascript">
            $(document).ready(function() {
            var monthNames = [ "Jan.", "Feb.", "Mar.", "Apr.", "May", "June",
            "July", "Aug.", "Sept.", "Oct.", "Nov.", "Dec." ];
            var endDate = new Date(',
                year(Sys.Date()),',', month(Sys.Date())
                ,', 1);
            var slider = $("#dates").slider();
            var labels = slider.domNode.find(".jslider-label span");
            labels.eq(0).text("Jan., 1962");
            labels.eq(1).text([monthNames[endDate.getUTCMonth() +1], endDate.getUTCFullYear()].join(", "));
            // override the default "Nice" function.
            slider.Nice = function(value) {
alert("hi")
                var ref_date = new Date(1962, 1, 1);
                var slider_date = new Date(ref_date.setMonth(ref_date.getMonth() + value));
                return [monthNames[slider_date.getUTCMonth()], slider_date.getUTCFullYear()].join(", ");
            }

            $(slider).trigger("slidechange");
            })

    $(document).ready(function() {
                var monthNames = [ "Jan.", "Feb.", "Mar.", "Apr.", "May", "June",
                    "July", "Aug.", "Sept.", "Oct.", "Nov.", "Dec." ];
      var slider = $("#target").slider();
            var labels = slider.domNode.find(".jslider-label span");
          labels.eq(0).text([monthNames[', month(targetStart()) +1, '],', year(targetStart()), '].join(", "));
            labels.eq(1).text([monthNames[', month(targetEnd()) + 1, '], ', year(targetEnd()), '].join(", "));


      // override the default "Nice" function.
      slider.Nice = function(value) {
alert("hi")
        var ref_date = new Date(', year(targetStart()), ', ', month(targetStart()),',1 );
        // each slider step is 4 weeks, translating to 24 * 3600 * 1000 milliseconds
        var slider_date = new Date(ref_date.setMonth(ref_date.getMonth() + value - 1));

        return [monthNames[slider_date.getUTCMonth()],
                slider_date.getUTCFullYear()].join(", ");
      }

            $(slider).trigger("slidechange");
    })
  </script>
            ')
            )
        )
)
0
Bob