javascript - requirejs - d3.sankey 不是函数

Question

我正在尝试使用从 requirejs 加载的 d3 库创建一个基本的 sankey 图。在过去，我使用了核心 d3 库并使一切都很好，但是在这种情况下尝试加载 d3-sankey 时它似乎没有注册。我也对垫片进行了修补，但我似乎无法弄清楚问题具体出在哪里。每次我尝试加载附加代码时，我都会收到错误消息“Uncaught TypeError: d3.sankey is not a function”。

我假设问题是正在加载的库的顺序，但我还是不确定如何解决这个问题。谁能帮忙？

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 ******//
});

Answer 1

为什么要使用 require？

如果我加载以下 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() 注册它包含的各个模块，这就是为什么 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 ******//
});
});