Requirejs，d3和nvd3集成 [英] Requirejs, d3 and nvd3 integration

问题描述

我面临的问题是集成 requirejs 使用 d3 和 nvd3 ，我发现一个简单的解决方案使用require的 shim 。使用垫片我可以导出一个变量，我也可以定义依赖：

I'm facing the problem of integrating requirejs with d3 and nvd3, and i found an easy solution using require's shim. Using the shim i can export a variable, and i can also define dependencies:

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

这样，我只需要安装d3和其他带有bower的软件包，并且用require包含它们，它真的很快速，干净。

In this way, i simply install d3 and other packages with bower, and include them with require, and it is really quick and clean.

但是，我面临以下问题：全局d3变量和本地（在需要模块中注入的变量）之间可能有一些冲突。这是与转换和选择相关的d3 / require / nvd3集成问题。我不完全明白问题，但我已经可以做一些考虑。

Nonetheless, i faced the following problem: there are probably some clashes between the global d3 variable and the local one (the one injected in the requiring modules). It is a d3 / require / nvd3 integration problem related to transitions and selections. I don't fully understand the problem, but i can already make some considerations.

• jquery与require有相同的问题， noconflict方法修复它


• 很多库都有这种行为，他们导出一个全局符号，但是据我所知，没有从一般问题的requirejs的准备解决


• 如果我将对 d3 的所有全局引用重命名为d3源到另一个名称，问题是固定的。我仍然在注入的模块中有 d3 ，但它不再冲突了

• jquery has the same problem with require, and they provide the noconflict method to fix it
• many libraries have this behavior, they export a global symbol, but as far as i know there is no ready fix from requirejs for the general problem
• the problem is fixed if i rename all global references to d3 into d3 source to another name. I still have d3 in the injected module, but it is not conflicting anymore

至于我可以看到，所有的d3功能工作这种方式，但其中一个nvd3图表有过渡破坏可能是因为选择或分派器被覆盖。它需要深入了解d3内部来精确地找出错误，但是可能一个简单但正确的处理全局符号将清除类似问题的整个计数。

As far as i can see, all d3 functionalities work this way, but one of the nvd3 charts has transitions broken probably because a selection or dispatcher is overwritten. It requires deep understanding of d3 internals to spot precisely the error, but probably a simple yet correct handling of the global symbol will clear the whole tally of similar problems.

由于requirejs处理shim依赖的方式，全局d3符号暴露给nvd3。同样的符号，无论如何，不​​需要模块，如果注入（包括在模块依赖），将被覆盖某些。

Probably, due to the way requirejs handles shim dependencies, the global d3 symbol is exposed to nvd3. The same symbol, anyway, is not available to requiring modules, and will be overwritten somehow if injected (included in the module dependencies).

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

I tried also to wrap d3 in a module and properly return a local d3 variable, but looks like the problem still persists.

我也在此d3小组讨论，其中包含有关d3和模块的一些以前的帖子。

I also asked help about this on this d3 group discussion which hosts some previous posts about d3 and modules.

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

I added a test case here: https://github.com/danse/requirenvd3

推荐答案

问题似乎不是您的RequireJS配置，而是事实上，你使用d3.v3而不是d3.v2。我降级了你的测试用例中的d3，转换工作正常。 （弹出窗口仍然都在一边，我不认为他们应该是，但这似乎不是你目前关注的。）这是我的理解，nvd3有一些问题d3.v3 ，这可能是一个。另外，请注意dots在ddotsenko的jsFiddle的版本。这可以解释为什么他的解决方案没有工作，当你实现它使用你自己的d3.v3库。

The problem doesn't appear to be your RequireJS configuration but rather the fact that you're using d3.v3 and not d3.v2. I downgraded d3 in your test case, and the transitions worked fine. (The popups are still all off to the side, which I don't think they should be, but that doesn't seem to be what you are presently concerned about.) It's my understanding that nvd3 has a few problems with d3.v3, this probably being one. Also, note the version of d3 in ddotsenko's jsFiddle. That could explain why his solution didn't work when you implemented it using your own d3.v3 library.

这篇关于Requirejs，d3和nvd3集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！