闪亮的自定义输出未渲染

我正在尝试将 D3.js 的网络可视化绑定到 Shiny 中的自定义输出。由于某种原因，我的渲染函数似乎没有被调用。这是我的代码：

绑定.js

var forceNetworkOB = new Shiny.OutputBinding();

forceNetworkOB.find = function(scope) {
  return $(scope).find("svg.rio-force-network");
};

forceNetworkOB.renderValue = function(el, graph) {

  alert('rendering')

  //actual rendering code here...

};

Shiny.outputBindings.register(forceNetworkOB, "jumpy.forceNetworkOB");

定制IO.R

renderForceNetwork <- function(expr, env=parent.frame(), quoted=FALSE) {

  func <- exprToFunction(expr, env, quoted)

  function() {

    # Never called
    browser()

    graph <- func()

    list(nodes = graph$nodes,
         links = graph$edges
    )
  }
}

forceNetwork <- function(id, width = '400px', height = '400px') {

  tag('svg', list(id = id, class = 'rio-force-network', width = width, height = height))

}

ui.R

library(shiny)
source('customIO.R')

shinyUI(fluidPage(

  tags$script(src = 'js/d3.min.js'),
  tags$script(src = 'js/rbindings.js'),

  titlePanel('Network Visualization'),

  tabsetPanel(
    tabPanel('D3.js Force Layout',
      forceNetwork('vis.force', width = '800px', height = '800px'),
    )
  )

))

和服务器.R

library(shiny)

source('cytoscape.R')
source('customIO.R')

shinyServer(function(session, input, output) {


  # Load the network
  network <- networkFromCytoscape('network.cyjs')

  output$vis.force <- renderForceNetwork({

    # Never called
    print('rendering')
    browser()

    list(
      nodes = data.frame(name = network$nodes.data$Label_for_display, group = rep(1, nrow(network$nodes.data))),
      edges = data.frame(from = network$edges[,1], to = network$edges[,2])
    )

  })

})

从注释中可以看到，我的 R 渲染函数中的 browser() 行从未被调用，js 渲染函数中的alert() 也从未被调用。通过一些 js 调试，我可以看到我的自定义绑定正确地给出了要渲染的 svg 元素及其 id。这可能很简单，但我无法弄清楚。

好吧，虽然代码看起来都是合法的，但你确实必须深入研究 Shiny 的源代码才能找到罪魁祸首。

当 Shiny 初始化时，它会调用initShiny()，然后调用bindOutputs。 现在，这就是bindOutputs函数看起来像：

function bindOutputs(scope) {

  if (scope === undefined)
    scope = document;

  scope = $(scope);

  var bindings = outputBindings.getBindings();

  for (var i = 0; i < bindings.length; i++) {
    var binding = bindings[i].binding;
    var matches = binding.find(scope) || [];
    for (var j = 0; j < matches.length; j++) {
      var el = matches[j];
      var id = binding.getId(el);

      // Check if ID is falsy
      if (!id)
        continue;

      var bindingAdapter = new OutputBindingAdapter(el, binding);
      shinyapp.bindOutput(id, bindingAdapter);
      $(el).data('shiny-output-binding', bindingAdapter);
      $(el).addClass('shiny-bound-output'); // <- oops!
    }
  }

  // Send later in case DOM layout isn't final yet.
  setTimeout(sendImageSize, 0);
  setTimeout(sendOutputHiddenState, 0);
}

我标记的线<- oops是导致所有问题的原因。 这确实不是 Shiny 的 bugper se: 这行代码依赖于jQuery添加一个类el， 哪一个是svg您创建的 DOM 元素forceNetwork()功能。

班上shiny-bound-output对于actual与工作绑定。

问题是$.addClass不适合<svg>.作为一个很好的参考，看这篇文章 http://toddmotto.com/hacking-svg-traversing-with-ease-addclass-removeclass-toggleclass-functions/ or stackoverflow 上的这个问题 https://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass.

所以，结果是，你的<svg>元素缺少所需的shiny-bound-output可以定制您的课程OutputBinding才能正常运行。

解决方案：

不要使用<svg>作为输出的容器. Use a <div>反而。 这意味着，你应该改变你的forceNetwork函数：

forceNetwork <- function(id, width = '400px', height = '400px') {    
  tag('div', list(id = id, class = 'rio-force-network', width = width, height = height))
}

您可以轻松地附加一个<svg> using d3.select(...).append('svg')并在那里设置宽度和高度。

（记得修改你的find()函数于rbindings.js以及）。

最后一句话

如果你以某种方式添加d3.select(...).append('svg')您的 javascript 代码，请记住clear() the <div>输出绑定中的容器renderValue()实际 d3 绘图之前的函数。不然每次renderForceNetwork被调用时，它将添加一个新的<svg>元素给你的<div>容器。