使用 RequireJS 加载 plotly 和 D3
Using RequireJS to load plotly and D3
我正在尝试使用 RequireJS 在我的 js 代码中加载 plotly 和 d3 库。我试过这个:
require.config({
paths: {
d3: '/static/scripts/plotly/dependencies/d3.v3.min',
plotly: '/static/scripts/plotly/plotly.min'
}
});
require(['d3'], function(d3) {
d3();
});
require(['plotly'], function(plotly) {
plotly();
});
但这不起作用。当我的 js 函数被调用时,我得到:
Uncaught ReferenceError: plotly is not defined
Uncaught ReferenceError: Plotly is not defined
Uncaught ReferenceError: d3 is not defined
Uncaught TypeError: d3 is not a function
在这种情况下使用 RequireJS 的正确方法是什么?
正在使用当前版本的代码更新 post,但仍然无法正常工作。
在我现在的调用脚本中:
require.config({
paths: {
heatmap: '/static/scripts/heatmap',
d3: '/static/scripts/plotly/dependencies/d3.v3.min',
plotly: '/static/scripts/plotly/plotly.min',
}
});
require(['d3', 'plotly', 'heatmap'], function(d3, plotly, heatmap) {
generate_heatmap();
});
它失败了:
Uncaught ReferenceError: Plotly is not defined(anonymous function) @ plotly.min.js:17
函数 Plotly(大写 P)在 plotly.min.js 中定义。我必须在某处添加对该函数的引用吗?
Plotly 需要 shim
,因为它依赖于 D3,而且根据 Plotly 文档,看起来还需要 jQuery。您的配置应如下所示:
/*
main.js file
*/
require.config({
paths: {
d3: '/static/scripts/plotly/dependencies/d3.v3.min',
jquery: '/path/to/jquery',
plotly: '/static/scripts/plotly/plotly.min'
},
shim: {
plotly: {
deps: ['d3', 'jquery'],
exports: 'plotly'
}
}
});
require(['d3', 'plotly'], function(d3, plotly) {
console.log(plotly); // Object {Lib: Object, util: Object...}
console.log(d3); // Object {version: "3.5.6", behavior: Object...}
});
在您的 index.html 中,您应该只有一个脚本标签:
<script data-main="main" src="/path/to/require/folder/require.js"></script>
如果你想在另一个使用 require 的 JS 文件中使用 D3 和 Plotly,那么你应该使用 AMD 风格:
/*
foo-bar.js
*/
define(['d3', 'plotly'], function(d3, plotly) {
var foo = {};
function bar() {
// Some code here...
}
// This will allow other modules to use
// the foo object and the bar function.
return fooBar {
foo: foo,
bar: bar
}
});
现在,您可以在另一个模块中使用foo-bar.js(假设这两个文件在同一目录级别):
define(['./foo-bar'], function(fooBar) {
console.log(fooBar.foo) // Object
console.log(fooBar.bar) // function() {}
});
您是否尝试过将您的第三个 Java 脚本文件与这两个文件耦合。这里有一个建议:
require.config({
paths: {
d3: '/static/scripts/plotly/dependencies/d3.v3.min',
plotly: '/static/scripts/plotly/plotly.min',
myfile: '/stattic/scripts/myfile',
}
});
require(['d3', 'plotly', 'myfile'], function(d3, plotly, myfile) {
generate_heatmap();
});
我遇到了同样的问题,这是 Plotly 中的 defect/oversight。错误发生在库本身的最后一行 (plotly.js
/ plotly.min.js
):
...:414}]},{},[305])(305)});Plotly.version='1.0.0';
我怀疑这是正在使用的模块模式和库自己检测 AMD 加载程序的代码的问题。
我能够解决它删除最后一行,我猜这不会导致任何功能中断。
...:414}]},{},[305])(305)});
我正在尝试使用 RequireJS 在我的 js 代码中加载 plotly 和 d3 库。我试过这个:
require.config({
paths: {
d3: '/static/scripts/plotly/dependencies/d3.v3.min',
plotly: '/static/scripts/plotly/plotly.min'
}
});
require(['d3'], function(d3) {
d3();
});
require(['plotly'], function(plotly) {
plotly();
});
但这不起作用。当我的 js 函数被调用时,我得到:
Uncaught ReferenceError: plotly is not defined
Uncaught ReferenceError: Plotly is not defined
Uncaught ReferenceError: d3 is not defined
Uncaught TypeError: d3 is not a function
在这种情况下使用 RequireJS 的正确方法是什么?
正在使用当前版本的代码更新 post,但仍然无法正常工作。
在我现在的调用脚本中:
require.config({
paths: {
heatmap: '/static/scripts/heatmap',
d3: '/static/scripts/plotly/dependencies/d3.v3.min',
plotly: '/static/scripts/plotly/plotly.min',
}
});
require(['d3', 'plotly', 'heatmap'], function(d3, plotly, heatmap) {
generate_heatmap();
});
它失败了:
Uncaught ReferenceError: Plotly is not defined(anonymous function) @ plotly.min.js:17
函数 Plotly(大写 P)在 plotly.min.js 中定义。我必须在某处添加对该函数的引用吗?
Plotly 需要 shim
,因为它依赖于 D3,而且根据 Plotly 文档,看起来还需要 jQuery。您的配置应如下所示:
/*
main.js file
*/
require.config({
paths: {
d3: '/static/scripts/plotly/dependencies/d3.v3.min',
jquery: '/path/to/jquery',
plotly: '/static/scripts/plotly/plotly.min'
},
shim: {
plotly: {
deps: ['d3', 'jquery'],
exports: 'plotly'
}
}
});
require(['d3', 'plotly'], function(d3, plotly) {
console.log(plotly); // Object {Lib: Object, util: Object...}
console.log(d3); // Object {version: "3.5.6", behavior: Object...}
});
在您的 index.html 中,您应该只有一个脚本标签:
<script data-main="main" src="/path/to/require/folder/require.js"></script>
如果你想在另一个使用 require 的 JS 文件中使用 D3 和 Plotly,那么你应该使用 AMD 风格:
/*
foo-bar.js
*/
define(['d3', 'plotly'], function(d3, plotly) {
var foo = {};
function bar() {
// Some code here...
}
// This will allow other modules to use
// the foo object and the bar function.
return fooBar {
foo: foo,
bar: bar
}
});
现在,您可以在另一个模块中使用foo-bar.js(假设这两个文件在同一目录级别):
define(['./foo-bar'], function(fooBar) {
console.log(fooBar.foo) // Object
console.log(fooBar.bar) // function() {}
});
您是否尝试过将您的第三个 Java 脚本文件与这两个文件耦合。这里有一个建议:
require.config({
paths: {
d3: '/static/scripts/plotly/dependencies/d3.v3.min',
plotly: '/static/scripts/plotly/plotly.min',
myfile: '/stattic/scripts/myfile',
}
});
require(['d3', 'plotly', 'myfile'], function(d3, plotly, myfile) {
generate_heatmap();
});
我遇到了同样的问题,这是 Plotly 中的 defect/oversight。错误发生在库本身的最后一行 (plotly.js
/ plotly.min.js
):
...:414}]},{},[305])(305)});Plotly.version='1.0.0';
我怀疑这是正在使用的模块模式和库自己检测 AMD 加载程序的代码的问题。
我能够解决它删除最后一行,我猜这不会导致任何功能中断。
...:414}]},{},[305])(305)});