需要js、d3 和 nvd3 集成

2024-05-21

我面临整合的问题要求 /questions/tagged/requirejs with d3 /questions/tagged/d3 and nvd3 /questions/tagged/nvd3,我找到了一个使用 require 的简单解决方案shim http://requirejs.org/docs/api.html#config-shim。使用垫片我可以导出变量,还可以定义依赖项:

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

这样,我只需使用 Bower 安装 d3 和其他软件包,并将它们包含在 require 中,这确实非常快速和干净。

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

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

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

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

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

我也在上面询问了有关此问题的帮助这次d3小组讨论 https://groups.google.com/d/topic/d3-js/PSPKF8V0D00/discussion其中包含一些之前关于 d3 和模块的帖子。


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


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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

需要js、d3 和 nvd3 集成 的相关文章

  • 错误找不到“pages”目录。请在项目根目录下创建一个”

    以前我的项目设置是 public next src pages components assets next config js 这工作正常 但我将结构更改为以下 public src client next config js jscon
  • 未捕获的类型错误:无法读取未定义的属性“toLowerCase”

    我收到此错误 它源自 jquery 框架 当我尝试加载准备好的文档上的选择列表时 出现此错误 我似乎无法找到为什么会出现此错误 它适用于更改事件 但在尝试手动执行该函数时出现错误 未捕获的类型错误 无法读取未定义的属性 toLowerCas
  • Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Headers

    我试图通过发布请求将文件发送到我的服务器 但是当它发送时会导致错误 Access Control Allow Headers 不允许请求标头字段 Content Type 所以我用谷歌搜索了错误并添加了标题 http post rootSc
  • 在 javascript 中访问 ajax POST 响应

    我正在从 javascript 函数发出 ajax POST 请求 function UpdateMetrics ajax type POST url MyHandler ashx Param1 value1 data contentTyp
  • JavaScript 中的正则表达式用于验证十进制数字

    我想要 JavaScript 中的正则表达式来验证十进制数字 它最多只允许两位小数 例如 它应该允许10 89但不是10 899 它还应该只允许一个句点 例如 它应该允许10 89但不是10 8 9 尝试使用以下表达式 d d 0 2 如果
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • 通过 Javascript 将图像切割成碎片

    我正在创建一个简单的拼图游戏 为了做到这一点 我需要将我正在使用的图片切成 20 块 Javascript 有没有办法将一张图片切成 20 个相等的部分 并将它们保存为网页中的 20 个不同的对象 或者我只需要进入 Photoshop 自己
  • mouseover 和 mouseout 事件在子进程上触发

    代码 div div div div 如果我将鼠标悬停在Navigation the Drop Downdiv 向下滑动 如果我将鼠标移开 它会向上滑动 问题是如果我将鼠标悬停在孩子上Drop Downdiv它也向上滑 动 有谁知道我该如何
  • Backbone 中的加载栏

    我想显示加载消息 图标 直到列表中的所有项目都已呈现 这是我的示例中的 jsfiddle http jsfiddle net 9R9zU 58 http jsfiddle net 9R9zU 58 我尝试在 Feed 部分添加一个带有加载栏
  • 获取 JSON 中的 HTML 以在 React 组件中呈现为 HTML

    试图找出如何让链接实际呈现为链接 现在 在我从 Json 文件中读取这行文本后 React 将超链接渲染为文字文本 而不将其渲染为链接 一些数据 json about John has a blog you can read a href
  • express 或express-generator:我需要两者吗?

    只是探索 Node js 并遇到了 Express 在 npm 存储库站点上https www npmjs com package express https www npmjs com package express它明确指出安装是 np
  • 在overlayImage中应用滤镜的方法在哪里?

    我想在overlayImage中应用一个过滤器 唯一的方法是在渲染后在整个画布上应用过滤器 对此没有内置支持 但很容易 破解 var overlayImageUrl load overlay image first fabric Image
  • 为 Meteor 数据创建编号列表

    有没有办法获取 Meteor 集合中项目的编号列表的 编号 我知道我可以在 html 中做到这一点 但我觉得如果我可以在 spacebars 中放置一些东西 那么样式会更容易 如果我可以使用更好的术语 请告诉我 像这样的东西 前 20 部电
  • 为什么 document.getelementbyId 在 Firefox 中不起作用?

    我不明白为什么 document getElementById 在 Firefox 中不起作用 document getElementById main style width 100 当我检查 Firebug 时 它说 类型错误 docu
  • 通过多个回调优雅地传递“点击事件”

    当未登录的用户单击给定的按钮时 我想停止该事件 收集他的 oauth 收集他的电子邮件 如果我没有 然后执行该事件 我想用 javascript 来做所有事情 因为这会让事情变得更加简单 这就是我执行它的方式 我有两个问题 有没有更优雅的方
  • 如何查看网站浏览者的操作系统?

    我运行的是 Ubuntu 8 04 最近在访问网站时收到以下错误 请使用运行 Windows 98 2000 Me NT 或 XP 的计算机返回 www site com 网站如何知道我正在运行哪个操作系统 是仅通过 javascript
  • ExpressJS - DELETE 请求后 res.redirect

    我一直在寻找如何执行此操作 我正在尝试在发出删除请求后重定向 这是我正在使用的代码没有重定向 exports remove function req res var postId req params id Post remove id p
  • 为什么从浏览器上传到 S3 时出现 403 错误?

    因此 我尝试查看此处之前的答案 但似乎没有任何效果 我正在使用 Dropzone 它似乎发出 OPTIONS 请求来获取所有允许的 CORS 相关信息 但它似乎没有正确返回 因此 通过查看 Chrome 开发工具 我有以下请求标头 Host
  • Jquery 两个字段的时间差(以小时为单位)

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2
  • WooCommerce 使用 AJAX 设置购物车数量?

    我已经为此绞尽脑汁好几天了 需要一些指导 我正在为 WooCommerce 网站完全从头开始制作自定义主题 现在我正在尝试让购物车功能正常工作 我一直试图使用按钮 来更新购物车中产品的数量 对我来说问题似乎是WC 我在functions p

随机推荐