使用 R2D3 时无法识别的功能

Question

我有类似的代码，仅使用 javascript 就可以正常工作，但是当我尝试使用 R2D3 从 flexdashboard 运行它时，无法识别脚本中包含的其他功能。

我简化了下面的代码以专注于生成错误类型错误的 ScaleRadial 函数（我将其包含在 htmltools::tag$ 脚本中）：d3.scaleRadial 不是函数。

我对 d3.tip 也有类似的问题，但没有包含该问题的代码。

我已经尝试了所有我能想到的方法，但都无济于事。热烈欢迎任何帮助。

dashboard.Rmd

---
title: "Dashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows

---


Tab 1
===================================== 
  <div id="map" style="width: 800px; height: 800px"></div>

  ```{r}

library(r2d3)
htmltools::tagList(
  htmltools::tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"),
  htmltools::tags$script(src = "https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.js"),
  htmltools::tags$script(src = "https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/d3-scale-radial.js"),
)

r2d3(script = "bbmapchartSO.js")

```

bbmapchartSO.js

// set the dimensions and margins of the graph
var size = 800;
var margin = {top: 100, right: 0, bottom: 0, left: 0},
    width = size - margin.left - margin.right,
    height = size - margin.top - margin.bottom,
    innerRadius = 240,
    outerRadius = Math.min(width, height) / 2;   // the outerRadius goes from the middle of the SVG area to the border,

    var places = [
      {
          "id": 1,
          "value": 15
      },
      {
          "id": 2,
          "value": 50
      },
      {
          "id": 3,
          "value": 36
      },
      {
          "id": 4,
          "value": 65
      }]

  var mapCenter = new L.LatLng(52.482672, -1.897517);

  var map = L.map('map').setView(mapCenter, 15);
        mapLink = 
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
            dragging: false
            }).addTo(map);

    /* Initialize the SVG layer */
    map._initPathRoot();

    /* We simply pick up the SVG from the map object */
    var leaflet_svg = d3.select("#map").select("svg"),
        central_map_svg = leaflet_svg.append("g"),
      chart_svg = leaflet_svg.append("g")
        .attr("transform", "translate(" + (width / 2 + margin.left) + "," + (height / 2 + margin.top) + ")");

  function plotBBChartOnMap(data) {

  // X scale
  var x = d3.scaleBand()
      .range([0, 2 * Math.PI])    // X axis goes from 0 to 2pi = all around the circle. 
      .align(0)                  // This does nothing
      .domain(data.map(function(d) { return d.id; })); // The domain of the X axis is the list of Stations.

  // Y scale outer variable
  var y= d3.scaleRadial()
      .range([innerRadius, outerRadius])   // Domain will be define later.
      .domain([0, 68]); // Domain of Y is from 0 to the max seen in the data

  // Add the bars
  chart_svg.append("g")
    .selectAll("path")
    .data(data)
    .enter()
    .append("path")
      .attr("d", d3.arc()     // imagine your doing a part of a donut plot
          .innerRadius(y(0))
          .outerRadius(function(d) { return y(d['value']); })
          .startAngle(function(d) { return x(d.id); })
          .endAngle(function(d) { return x(d.id) + x.bandwidth(); })
          .padAngle(0.02)
          .padRadius(innerRadius))
}

plotBBChartOnMap(places)

Answer 1

r2d3 包中的 dependencies 参数描述：

Additional HTML dependencies. These can take the form of paths to JavaScript or CSS files, or alternatively can be fully specified dependencies created with htmltools::htmlDependency.

所以只支持文件，不支持 URL 不幸的是 htmlDependency 也是如此。所以你可以这样做：

library(r2d3)

download.file("https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.js", "leaflet-0.7.js")
download.file("https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/d3-scale-radial.js", "d3-scale-radial.js")
download.file("https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js", "d3-tip.min.js")

r2d3(script = "bbmapchartSO.js",
     dependencies = list("leaflet-0.7.js",
                         "d3-scale-radial.js",
                         "d3-tip.min.js"))

使用 R2D3 时无法识别的功能

Functions not recognised when using R2D3

javascript

r

d3.js

r-markdown

r2d3