javascript - Requirejs、d3 和 nvd3 集成

Question

我正面临整合 requirejs 的问题与 d3和 nvd3 ，并且我使用 require 的 shim 找到了一个简单的解决方案.使用垫片我可以导出一个变量，我也可以定义依赖关系:

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

这样，我只需用 bower 安装 d3 和其他包，并用 require 包含它们，它非常快速和干净。

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

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

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

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

我也尝试将 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 库实现他的解决方案时它不起作用。