如何将 d3JS javascript 文件引入 R Shiny 以绘制力网络图？

Question

我正在尝试构建一个闪亮的应用程序来显示我在 d3JS 中编码的复杂力网络图。这超出了我尝试过的 R 包 networkD3 的范围。相反，我想引入我高度自定义的 .js 文件来处理显示，这就是我迷路的地方。

为简单起见，让我们考虑最简单的力网络图，改编自此处：http://bl.ocks.org/sathomas/11550728 如果有人可以通过示例 ui.R 和 server.R 向我展示如何引入文件 SimpleFN.js（见下文），那么我可以将方法扩展到更复杂的示例。我知道如何引入 style.css 文件。同样未显示的是对 d3.min.js 库 (http://d3js.org/d3.v3.min.js) 的必需引用，我也知道如何引用它。

我知道你在说什么："This is not a reactive graph! Why are you bothering?"我会到达那里，相信我。 :)

如能提供有关此最基本示例的任何帮助，我们将不胜感激！

干杯！

蒂姆

注意：Cross-post 到 Shiny Google 组，其中迄今为止没有回复。

文件style.css:

.node {
    fill: #ccc;
    stroke: #fff;
    stroke-width: 2px;
}

.link {
    stroke: #777;
    stroke-width: 2px;
}

文件SimpleFN.js:

var width = 640,
    height = 480;

var nodes = [
    { x:   width/3, y: height/2 },
    { x: 2*width/3, y: height/2 }
];

var links = [
    { source: 0, target: 1 }
];

var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);

var force = d3.layout.force()
    .size([width, height])
    .nodes(nodes)
    .links(links);

force.linkDistance(width/2);

var link = svg.selectAll('.link')
    .data(links)
    .enter().append('line')
    .attr('class', 'link');

var node = svg.selectAll('.node')
    .data(nodes)
    .enter().append('circle')
    .attr('class', 'node');
force.on('end', function() {
    node.attr('r', width/25)
        .attr('cx', function(d) { return d.x; })
        .attr('cy', function(d) { return d.y; });
    link.attr('x1', function(d) { return d.source.x; })
        .attr('y1', function(d) { return d.source.y; })
        .attr('x2', function(d) { return d.target.x; })
        .attr('y2', function(d) { return d.target.y; });
});
force.start();

Answer 1

如果您的 d3.min.js、style.css 和 SimpleFN.js 文件与 ui.R 和 server.R 文件位于同一目录中，您可以执行以下操作：

ui.R

library(shiny)

shinyUI(fluidPage(tags$head(includeScript("d3.min.js")),
                  includeCSS('style.css'),
    mainPanel(uiOutput("chart"))
    ))

server.R

library(shiny)

shinyServer(function(input, output) {
  output$chart <- renderUI({
    includeScript('SimpleFN.js')
  }) 
})

在我的机器上加载需要几秒钟。如果您不需要 SimpleFN.js 脚本，您也可以直接将其包含在 ui.R 中。

如何将 d3JS javascript 文件引入 R Shiny 以绘制力网络图？

How to bring in a d3JS javascript file to R Shiny to draw for a Force Network graph?

r

d3.js

shiny