Requirejs、d3 和 nvd3 集成

Question

我面临将requirejs 与d3 和nvd3 集成的问题，我使用require 的shim 找到了一个简单的解决方案。使用 shim 我可以导出一个变量，我还可以定义依赖项：

d3: { exports: 'd3' },
nvd3: {
  exports: 'nv',
  deps: ['d3']
},

这样，我只需用bower安装d3和其他包，然后用require将它们包含进来，真的又快又干净。

尽管如此，我遇到了以下问题：全局 d3 变量和本地变量（注入到所需模块中的变量）之间可能存在一些冲突。这是一个与转换和选择相关的 d3 / require / nvd3 集成问题。我不完全理解这个问题，但我已经可以考虑一些了。

• jquery 和 require 有同样的问题，他们提供了 noconflict 方法来修复它
• 许多库都有这种行为，它们导出全局符号，但据我所知，requirejs 没有针对一般问题的现成修复
• 如果我将所有对 d3 的全局引用重命名为 d3 源，则问题已得到解决。我在注入的模块中仍然有d3，但它不再冲突了

据我所知，所有 d3 功能都以这种方式工作，但其中一个 nvd3 图表的转换中断可能是因为选择或调度程序被覆盖。它需要对 d3 内部的深入了解才能准确地发现错误，但是对全局符号的简单而正确的处理可能会清除所有类似问题。

可能由于 requirejs 处理 shim 依赖项的方式，全局 d3 符号会暴露给 nvd3。无论如何，相同的符号不适用于需要的模块，并且如果注入（包含在模块依赖项中）会以某种方式被覆盖。

我还尝试将 d3 包装在一个模块中并正确返回一个本地 d3 变量，但看起来问题仍然存在。

我还在 this d3 group discussion 上寻求帮助，该网站承载了一些关于 d3 和模块的先前帖子。

---

我在这里添加了一个测试用例：https://github.com/danse/requirenvd3

Answer 1

问题似乎不在于您的 RequireJS 配置，而在于您使用的是 d3.v3 而不是 d3.v2。我在您的测试用例中降级了 d3，并且转换效果很好。 （弹出窗口仍然偏向一边，我认为它们不应该如此，但这似乎不是您目前关心的问题。）据我了解，nvd3 与 d3.v3 存在一些问题，这可能是一个。另外，请注意 ddotsenko 的 jsFiddle 中的 d3 版本。这可以解释为什么当您使用自己的 d3.v3 库实现时他的解决方案不起作用。

Answer 2

首先，你可以绕过shim 你不需要它来为纯JS返回任何东西。只需使用全局变量。

Loading Angular from CDN via RequireJS is not injected

其次，虽然shim 对于声明脚本的依赖关系是半有用的，但您也可以明确地这样做：

require(['path/to/d3.min'], function(){
    // nesting to insure d3 loads before nvd3
    require(
        [
            'path/to/mylogic' // <- AMD module
            ,'path/to/nvd3.min' // <- actually a plain JS file
        ]
        , function(mylogic /*, we ignore what nvd3 returns */){
            window.nv // is available for you
        }
    )
})

Answer 3

看看我在this main.js file（使用“depend”requirejs 插件）中做了什么，然后在其他需要导出到全局变量的文件中做：

定义（['d3']，函数（d3）{ // 这里的代码... });

depend 插件非常好，它允许您通过depend!plugin[dependancy1,dependancy2] 设置分层加载（“plugin”在“dependancy1”和“dependancy2”加载后加载。