Question

我正在尝试使用从requirejs加载的d3库创建基本的sankey图。过去，我使用了d3核心库，并且使一切正常，但是在这种情况下尝试加载d3-sankey似乎没有进行注册。我也对垫片进行了修改，但似乎无法弄清楚问题的具体出处。每次尝试加载附件代码时，都会出现错误“未捕获的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 ******//
});

Answer 1

为什么需要使用？

如果我加载以下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，{ {1}}

也许您有版本问题，如何知道各个模块的哪个版本属于d3.v4.8.0。

修改

如果我在其他模块之后加载d3-path，该错误将消失，但是如果以后可以使用，我将不知道。（没有链接，因为sankey不处理任何数据。

d3-sankey

requirejs-d3.sankey不是函数

1 个答案: