requirejs - d3.sankey не является функцией - PullRequest
Новая
       16

requirejs - d3.sankey не является функцией

0 голосов
/ 04 ноября 2018

Я пытаюсь создать базовую диаграмму Санки, используя библиотеки d3, загруженные из requirejs. В прошлом я использовал базовую библиотеку d3 и отрисовывал все нормально, однако при попытке загрузить d3-sankey в этом случае он, похоже, не регистрируется. Я также возился с прокладкой, но не могу понять, в чем конкретно проблема. Каждый раз, когда я пытаюсь загрузить прикрепленный код, я получаю сообщение об ошибке «Uncaught TypeError: d3.sankey не является функцией».

Я предполагаю, что проблема заключается в последовательности загрузки библиотек, но опять же я не уверен, как решить эту проблему. Кто-нибудь может помочь?

Codepen - https://codepen.io/quirkules/pen/wYoXxQ

// define URLs
require.config({
  paths: {
    cloudflare: 'https://cdnjs.cloudflare.com/ajax/libs'
  },
  map: {
    '*': {
      'd3': 'cloudflare/d3/4.8.0/d3',
      'd3-timer': 'cloudflare/d3-timer/1.0.5/d3-timer',
      'd3-array': 'cloudflare/d3-array/1.2.2/d3-array',
      'd3-collection': 'cloudflare/d3-collection/1.0.5/d3-collection',
      'd3-interpolate': 'cloudflare/d3-interpolate/1.3.0/d3-interpolate',
      'd3-color': 'cloudflare/d3-color/1.2.1/d3-color',
      'd3-shape': 'cloudflare/d3-shape/1.2.0/d3-shape',
      'd3-path': 'cloudflare/d3-path/1.0.5/d3-path',
      'd3-sankey': 'cloudflare/d3-sankey/0.7.1/d3-sankey'
    }
  },
  shim : {
    d3 : {
      exports : 'd3'
    },
    'd3-sankey' : {
      deps: ['d3']
    }
  }
});

// load d3
require(['d3', 'd3-timer', 'd3-array', 'd3-collection', 'd3-interpolate', 'd3-color', 'd3-shape', 'd3-sankey'], function(d3) {
  //****** CREATE DIVS ******//

  // Add the divs to the DOM
  $(document.body)
    .append('<div id="header"></div>')
    .append('<div id="chart"></div>')
    .append('<div id="footer"></div>');
  //add text to the divs
  document.getElementById("header").innerHTML = '<b>Title</b>';

  // set the dimensions and margins of the graph
  var margin = { top: 20, right: 20, bottom: 40, left: 50 },
    width = d3.select('#chart').node().getBoundingClientRect().width - margin.left - margin.right,
    height = d3.select('#chart').node().getBoundingClientRect().height - margin.top - margin.bottom;

  //
  var svg = d3.select("#chart")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);
  var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var graph = d3.sankey()
    .nodeWidth(15)
    .nodePadding(10)
    .size([width, height]);

  var path = graph.link();

  var freqCounter = 1;

  //****** END CREATE CHART ******//
});

1 Ответ

0 голосов
/ 04 ноября 2018

Зачем использовать требуется?

Если я загружаю следующие 2 сценария, он завершается с ошибкой в ​​строке var path = graph.link();, поэтому d3.sankey известен и является функцией.

Отменить все использование require и добавить 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-sankey/0.7.1/d3-sankey.min.js"></script>

d3.js уже содержит большинство других модулей, но не содержит d3-sankey. По какой-то причине d3.js не регистрирует отдельные модули, содержащиеся в require(), поэтому требуется попытаться загрузить модули d3-array, d3-collection, d3-shape, d3-path

Возможно, у вас проблема с версией, откуда вы знаете, какая версия отдельных модулей принадлежит d3.v4.8.0.

Редактировать

Если я загружу d3-sankey после других модулей, ошибка исчезнет, ​​но если она будет работать позже, я не знаю. (Нет ссылок, потому что sankey не обрабатывает данные. 

require(['d3-selection', 'd3-timer', 'd3-array', 'd3-collection', 'd3-interpolate', 'd3-color', 'd3-shape'], function(d3) {
require(['d3-sankey'], function(dsankey) {
  //****** CREATE DIVS ******//
  // .....
  var graph = dsankey.sankey()
    .nodeWidth(15)
    .nodePadding(10)
    .size([width, height]);
  //****** END CREATE CHART ******//
});
});
...