Question

我尝试使用RequireJS加载d3-path。查看缩小的| IntervalID | From | To | | ---------- | ---- | -- | | 1 | 1 | 10 | | 2 | 10 | 20 | | 3 | 20 | 30 | | 4 | 30 | 40 | | 5 | 40 | 50 |源代码，看起来它符合AMD标准，因为我在第一行看到了这一点：

d3-path

我的!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s(exports):"function"==typeof define&&define.amd?define(["exports"],s):s(t.d3=t.d3||{})}看起来像

index.html

我尝试加载<script> require.config({ paths: { "d3": "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min", "d3-path": "https://d3js.org/d3-path.v1.min", "underscore": "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min", "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" } }); </script>的JS文件看起来像

d3.path()

我可以require([ "d3", "d3-path", "underscore" ], function( d3, d3_path, _ ) { // d3, d3_path, and _ are defined // but d3.path() isn't defined });使用d3-path，但理想情况下我会d3_path.path()。但是，如果我将d3.path()和d3都设置为d3-path，那么d3会覆盖d3-path，而我会失去主d3个功能。

我也对RequireJS最佳做法持开放态度，因为我不确定我是否使用了最佳方法。谢谢！

Answer 1

初步说明：您正在尝试使用V4模块加载d3 V3，这不会很好地进行网格划分。

在您的问题上：这是您在使用微型模块时的工作方式。您加载孤立的功能并将它们组合在一起。

当您使用文档中所述的vanilla environments时，您只能获得d3全局：尝试

require.config({
    paths: {
        "d3": "https://d3js.org/d3.v4.min"
    }
});

require(['d3'], function(myd3) {
    console.log(window.d3); // undefined
    console.log(myd3); // d3 object
});

请注意，如果您加载整个d3 v4库，则会获得d3.path：

require(['d3'], function(myd3) {
    console.log(myd3.path); // function
});

最后，如果您打算使用多个微模块，可以使用映射配置：

require.config({
    paths: {
        d3src: 'https://d3js.org'
    },
    map: {
        '*': {
            'd3':  'd3src/d3.v4.min',
            'd3-selection':  'd3src/d3-selection.v1.min',
            'd3-path': 'd3src/d3-path.v1.min',
        }
    }
});


// if you want to load the selection and the path modules
require(['d3-selection', 'd3-path'], function(selection, path) {
    // ...
});

// if you want to load d3
require(['d3'], function(d3) {
    // ...
});

Answer 2

除了nikoshr关于使用d3微库的答案：您应该用连字符样式命名d3模块，例如： d3-selection，因为某些d3库依赖于其他d3库，并且在此语法中依赖require个。

此外，您可以在模块中创建自己的d3对象，这样您就不必更改代码并可以使用d3.path()。

require(['d3-selection', 'd3-path'], function(d3Selection, d3Path) {
    let d3 = Object.assign({}, d3Selection, d3Path);

    d3.path();
});

如何使用RequireJS加载依赖于d3的脚本？

2 个答案: