javascript – R / Shiny中的可拖动折线图

我已经构建了一个R / Shiny应用程序,它使用线性回归来预测某些指标.

为了使这个应用程序更具交互性,我需要添加一个折线图,在这里我可以拖动折线图的点,捕获新点并根据新点预测值.

基本上,我正在寻找RShiny中的something like this.有关如何实现这一目标的任何帮助？

解决方法:

你可以用R / Shiny d3.js来做：预览,可重现的例子,代码和演练可以在下面找到.

编辑次数：12/2018 – 请参阅MrGrumble的评论：

“对于d3 v5,我必须将事件从dragstart和dragend重命名为开始和结束,并将行var drag = d3.behavior.drag()更改为var drag d3.drag().”

可重复的例子：

最简单的方法是克隆此存储库(https://github.com/Timag/DraggableRegressionPoints).

预习：

Sry因为gif质量差：

说明：

该代码基于d3.js闪亮的R.它包含一个自定义闪亮函数,我将其命名为renderDragableChart().您可以设置圆的颜色和半径.
可以在DragableFunctions.R中找到该实现.

R-> d3.js-> R的相互作用：

数据点的位置最初在R中设置.请参阅server.R：

df <- data.frame(x = seq(20,150, length.out = 10) + rnorm(10)*8,
                 y = seq(20,150, length.out = 10) + rnorm(10)*8)
df$y[1] = df$y[1] + 80

图形通过d3.js呈现.必须在那里添加诸如线等的附加物.
主要的噱头应该是可拖动的点,并且应该将更改发送给R.
第一个用.on(‘dragstart’,function(d,i){}和.on(‘dragend’,function(d,i){}实现,后者用Shiny.onInputChange(“JsData”,coord)实现;.

编码：

ui.R

包括一个自定义闪亮函数DragableChartOutput(),它在DragableFunctions.R中定义.

library(shiny)
shinyUI( bootstrapPage( 
  fluidRow(
    column(width = 3,
           DragableChartOutput("mychart")
    ),
    column(width = 9,
           verbatimTextOutput("regression")
    )
  )
))

server.R

除了自定义函数renderDragableChart()之外,还基本闪亮.

library(shiny)
options(digits=2)
df <- data.frame(x = seq(20,150, length.out = 10) + rnorm(10)*8,
                 y = seq(20,150, length.out = 10) + rnorm(10)*8)
df$y[1] = df$y[1] + 80
#plot(df)
shinyServer( function(input, output, session) {

  output$mychart <- renderDragableChart({
    df
  }, r = 3, color = "purple")

  output$regression <- renderPrint({
    if(!is.null(input$JsData)){
      mat <- matrix(as.integer(input$JsData), ncol = 2, byrow = TRUE)
      summary(lm(mat[, 2] ~  mat[, 1]))
    }else{
      summary(lm(df$y ~  df$x))
    }
  })
})

这些函数在DragableFunctions.R中定义.注意,它也可以用库(htmlwidgets)实现.我决定在很长的路上实现它,因为它并不困难,你可以更好地理解界面.

library(shiny)

dataSelect <- reactiveValues(type = "all")

# To be called from ui.R
DragableChartOutput <- function(inputId, width="500px", height="500px") {
  style <- sprintf("width: %s; height: %s;",
    validateCssUnit(width), validateCssUnit(height))
  tagList(
    tags$script(src = "d3.v3.min.js"),
    includeScript("ChartRendering.js"),
    div(id=inputId, class="Dragable", style = style,
      tag("svg", list())
    )
  )
}

# To be called from server.R
renderDragableChart <- function(expr, env = parent.frame(), quoted = FALSE, color = "orange", r = 10) {
  installExprFunction(expr, "data", env, quoted)
  function(){
    data <- lapply(1:dim(data())[1], function(idx) list(x = data()$x[idx], y = data()$y[idx], r = r))
    list(data = data, col = color)
  } 
}

现在我们只剩下生成d3.js代码了.这在ChartRendering.js中完成.基本上必须创建圆圈并且必须添加“可拖动功能”.一旦拖动动作完成,我们希望将更新的数据发送到R.这在.on(‘dragend’,.)中用Shiny.onInputChange(“JsData”,coord);});实现.可以使用输入$JsData在server.R中访问此数据.

var col = "orange";
var coord = [];
var binding = new Shiny.OutputBinding();

binding.find = function(scope) {
  return $(scope).find(".Dragable");
};

binding.renderValue = function(el, data) {
  var $el = $(el);
  var boxWidth = 600;  
  var boxHeight = 400;
  dataArray = data.data
  col = data.col
    var box = d3.select(el) 
            .append('svg')
            .attr('class', 'box')
            .attr('width', boxWidth)
            .attr('height', boxHeight);     
        var drag = d3.behavior.drag()  
        .on('dragstart', function(d, i) { 
                box.select("circle:nth-child(" + (i + 1) + ")")
                .style('fill', 'red'); 
            })
            .on('drag', function(d, i) { 
              box.select("circle:nth-child(" + (i + 1) + ")")
                .attr('cx', d3.event.x)
                .attr('cy', d3.event.y);
            })
      .on('dragend', function(d, i) { 
                circle.style('fill', col);
                coord = []
                d3.range(1, (dataArray.length + 1)).forEach(function(entry) {
                  sel = box.select("circle:nth-child(" + (entry) + ")")
                  coord = d3.merge([coord, [sel.attr("cx"), sel.attr("cy")]])                 
                })
                console.log(coord)
        Shiny.onInputChange("JsData", coord);
            });

        var circle = box.selectAll('.draggableCircle')  
                .data(dataArray)
                .enter()
                .append('svg:circle')
                .attr('class', 'draggableCircle')
                .attr('cx', function(d) { return d.x; })
                .attr('cy', function(d) { return d.y; })
                .attr('r', function(d) { return d.r; })
                .call(drag)
                .style('fill', col);
};

// Regsiter new Shiny binding
Shiny.outputBindings.register(binding, "shiny.Dragable");

标签：shinyjs,javascript,r,d3-js,shiny
来源： https://codeday.me/bug/20190930/1835350.html