Функции не распознаются при использовании R2D3 - PullRequest
Новая
       123

Функции не распознаются при использовании R2D3

1 голос
/ 30 мая 2020

У меня есть аналогичный код, использующий только javascript, который отлично работает, но когда я пытаюсь запустить его с гибкой панели управления с помощью R2D3, дополнительные функции, включенные в скрипты, не распознаются.

Я упростил свой код ниже чтобы сосредоточиться на функции ScaleRadial (которую я включаю в htmltools :: tag $ script), которая выдает ошибку TypeError: d3.scaleRadial не является функцией.

У меня аналогичная проблема с d3.tip, но не включили код для этого.

Я пробовал все, что мог придумать, но безрезультатно. Любая помощь тепло приветствуется.

enter image description here

панель управления.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)

1 Ответ

1 голос
/ 02 июня 2020

Параметр dependencies из пакета r2d3 описывает:

Дополнительные HTML зависимости. Они могут принимать форму путей к файлам JavaScript или CSS или, в качестве альтернативы, могут быть полностью указанными зависимостями, созданными с помощью 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"))
...