javascript - Requirejs、d3 和 nvd3 集成

标签 javascript module d3.js requirejs

我正面临整合 的问题与 ,并且我使用 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

最佳答案

问题似乎不是您的 RequireJS 配置,而是您使用的是 d3.v3 而不是 d3.v2。我在你的测试用例中降级了 d3,并且转换工作正常。 (弹出窗口仍然全部放在一边,我认为它们不应该是这样,但这似乎不是您目前关心的问题。)据我了解,nvd3 在 d3.v3 方面存在一些问题,这可能是一个。另外,请注意 ddotsenko 的 jsFiddle 中 d3 的版本。这可以解释为什么当您使用自己的 d3.v3 库实现他的解决方案时它不起作用。

关于javascript - Requirejs、d3 和 nvd3 集成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15269535/

相关文章:

javascript - 从数组中返回正确的项目

perl - 如何用较短的名称调用 Perl 类?

generics - 再次出现 F# 中(非)通用模块的问题

module - 如何在 Julia 的函数内加载模块@everywhere

d3.js - 更改X轴上的刻度

javascript - d3.js 奇怪的旋转行为

javascript - php页面每60秒仅刷新div部分

javascript - 我正在尝试创建一个 for 循环,但我的计算机返回以下 :Cannot read property 'length' of null

javascript - AngularJS 如何在指令链接中使用 $scope.$broadcast

javascript - 将节点添加到 d3 网络错误(使用 fiddle 示例)