需求，d3和nvd3集成

Requirejs, d3 and nvd3 integration

本文关键字：nvd3 集成 d3 需求      更新时间：2023-09-26

我正面临着将需求与d3和nvd3集成的问题，我发现了一个使用require的shim的简单解决方案。使用shim，我可以导出一个变量，也可以定义依赖项:

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

通过这种方式，我只需要安装d3和其他包，并将它们包含在require中，这是非常快速和干净的。

尽管如此，我面临着以下问题:可能有一些冲突之间的全局d3变量和局部的一个(一个注入到需要的模块)。这是一个d3/require/nvd3集成问题，涉及到转换和选择。我不完全理解这个问题，但我已经可以做一些考虑了。

  • jquery也有同样的问题，他们提供了noconflict方法来修复它
  • 许多库都有这种行为，它们导出一个全局符号，但据我所知，对于一般问题
    • 的需求没有现成的修复
  • 这个问题是固定的，如果我重命名所有全局引用到d3到d3源到另一个名字。我仍然有d3在注入模块，但它不再冲突

据我所知，所有d3的功能都是这样工作的，但是nvd3的一个图表有过渡中断，可能是因为选择或调度程序被覆盖了。要准确地发现错误，需要对d3的内部结构有深入的了解，但可能对全局符号的简单而正确的处理将清除类似问题的全部记录。

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

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

我还在d3小组讨论中询问了一些关于d3和模块的帖子。

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

问题似乎不是你的RequireJS配置，而是你使用d3的事实。V3而不是d3, v2。我在你的测试用例中降级了d3，并且转换工作得很好。(弹出窗口仍然是在一边，我不认为他们应该，但这似乎不是你目前所关心的。)这是我的理解，nvd3与d3有一些问题。V3，这可能是1。另外，请注意ddotsenko的jsFiddle中d3的版本。这可以解释为什么当你用自己的d3实现它时，他的解决方案不起作用。v3图书馆。

首先，您可以绕过shim，您不需要它为纯js返回任何东西。请使用全局变量。

没有注入通过RequireJS从CDN加载Angular

第二，虽然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
        }
    )
})

看看我在这个main.js文件中做了什么(使用"depend" requires插件)，然后在其他文件中需要的东西应该导出到一个全局变量:

<>之前定义(['d3']，函数(d3) {//这里的代码…}）;之前

这个depend插件真的很好，它允许你通过depend设置分层加载!Plugin [dependancy1, dependancy2] (" Plugin "在"dependancy1"answers"dependancy2"加载后加载。

相关文章：