javascript - 从绘图中找不到 d3

Question

我正在尝试用plotly 创建我的第一个图表。这是 django 应用程序的一部分。在我的模板中，我有这个:

<script type="text/javascript" src="/static/scripts/heatmap.js"></script>
<script type="text/javascript" src="/static/scripts/plotly/plotly.min.js"></script>
<script type="text/javascript" src="/static/scripts/plotly/dependencies/d3.v3.min.js"></script>

我调用了 heatmap.js 中定义的 js 函数:

<script>
   generate_heatmap();
</script>

看起来像这样:

function generate_heatmap() {
   var data = [...];
   var layout = { ... };
   var graphOptions = {layout: layout};
   plotly.plot(data, graphOptions, function (err, msg) {
      console.log(msg);
   });
}

我在 js 控制台中得到了这个:

plotly.min.js:12 Uncaught ReferenceError: d3 is not defined
n.23../isnumeric @ plotly.min.js:12a @ plotly.min.js:6(anonymous function) @ plotly.min.js:6n.28.../../../../shelly/static/js/plugins/promise-1.0.0.min.js @ plotly.min.js:14a @ plotly.min.js:6t @ plotly.min.js:6(anonymous function) @ plotly.min.js:6(anonymous function) @ plotly.min.js:6(anonymous function) @ plotly.min.js:6

但我可以在网络选项卡和控制台中看到 d3 已加载:

d3
Object {version: "3.3.5", behavior: Object, event: null, ns: Object, geo: Object…}

我做错了什么蠢事？

Answer 1

您必须更改所包含文件的顺序。

<script type="text/javascript" src="/static/scripts/plotly/dependencies/d3.v3.min.js"></script>
<script type="text/javascript" src="/static/scripts/plotly/plotly.min.js"></script>