需求,d3和nvd3集成
Requirejs, d3 and nvd3 integration
我正面临着将需求与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"加载后加载。
- 如何检测用于WebGL的专用或集成显卡
- 在我的SPA应用程序中集成Facebook共享的问题
- vaadin:使用自定义布局集成angular js
- React ajax数据集成
- 有没有一个抽象层,这样我就可以集成一次,然后使用pusher、pubnub或faye
- IE中关于ZK和JavaScript集成的一些错误
- 如何将拼写检查集成到密文编辑器
- 将外部文件与AngularJs集成
- 禁用NVD3 multiBarHorizontalChart中0值的工具提示
- 如何将tesseract OCR与Cordova/Phonegap应用程序集成
- Cordova Facebook登录集成cordovaOauth
- 如何在Angular js中集成其他页面中的样式
- 性能与模块化:将JS集成到PHP或单独的custom.JS中
- Meteor集成测试,在velocity'她的镜子上有茉莉花
- Okta与JavaScript的集成
- 将prettyPhoto集成到Wordpress主题中
- 将epub.js集成到firefox中,作为.epub的默认读取器
- 在Meteor:p5.AudioIn()中集成p5.sound.js不是构造函数
- 如何将现有的angular js应用程序集成到Laravel 5中
- 需求,d3和nvd3集成