如何带入一个d3JS的JavaScript文件到R闪光绘制一个力网络图？ [英] How to bring in a d3JS javascript file to R Shiny to draw for a Force Network graph?

问题描述

我试图建立一个闪亮的应用程序，显示一个复杂的力网络图，我已经编码在d3JS。这超出了我可以做的R包networkD3，我试过。我反而想要引入我的高度自定义的.js文件处理显示，这是我失去的地方。

为了保持简单，让我们考虑最简单的力网络图，从这里修改： http://bl.ocks.org/sathomas/11550728
如果有人可以告诉我如何引入文件SimpleFN.js（见下文）与一个例子ui .R和server.RI可以扩展这个方法到我更复杂的例子。我知道如何带入style.css文件。此外，未显示的是对d3.min.js库的必需引用（ http://d3js.org /d3.v3.min.js ），我也知道如何引用。

我知道你在说什么：这不是一个反应图你为什么打扰？我会到那里，相信我。 ：）

任何帮助这个最基本的例子将非常感谢！

干杯！ >

Tim

注意：Cross-post到闪耀的Google群组，对日期没有回应。

文件style.css：

  .node {
 fill：#ccc ; 
 stroke：#fff; 
 stroke-width：2px; 
} 
 
 .link {
 stroke：＃777; 
 stroke-width：2px; 
} 
  

File 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高度）; 
 
 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 dx ;}）
 .attr（'cy'，function（d）{return dy;}）; 
 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（）; 
  

解决方案

如果您有 d3 .min.js ， style.css 和 SimpleFN.js 作为您可以执行的 ui.R 和 server.R 文件：

ui.R

  b shinyUI（fluidPage（tags $ head（includeScript（d3.min.js）），
 includeCSS（'style.css'），
 mainPanel（uiOutput（chart））
））
  

server.R

  library（shiny）
 
 shinyServer（function（input，output）{
 output $ chart& 
 includeScript（'SimpleFN.js'）
}）
}）
  

在我的机器上加载需要几秒钟。如果您不需要该部分，也可以在 ui.R 中直接包含 SimpleFN.js 被动。

I am trying to build a shiny app that displays a complex force network graph that I have coded in d3JS. This goes beyond what I can do the R package networkD3, which I have tried. I instead want to bring in my highly customized .js file that handles the display and this is where I am lost.

To keep things simple let's consider the simplest of force network graphs, adapted from here: http://bl.ocks.org/sathomas/11550728 If someone can show me how to bring in the file SimpleFN.js (see below) with an example ui.R and server.R I could then extend the approach to my more complicated example. I know how to bring in the style.css file. Also not shown is the required reference to the d3.min.js library (http://d3js.org/d3.v3.min.js) which I also know how to reference.

I know what you are saying: "This is not a reactive graph! Why are you bothering?" I will get there, trust me. :)

Any assistance with this most basic of examples would be greatly appreciated!

Cheers!

Tim

NOTE: Cross-post to Shiny Google Group where there was no response to date.

File style.css:

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

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

File 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();

解决方案

If you have the d3.min.js, style.css and SimpleFN.js files in the same directory as your ui.R and server.R files you could do:

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')
  }) 
})

It takes a few seconds to load on my machine. You can also directly include the SimpleFN.js script in your ui.R if you don't need that part to be reactive.

这篇关于如何带入一个d3JS的JavaScript文件到R闪光绘制一个力网络图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！