如何在 Phoenix 中使用 d3.js？答案

【问题标题】：How to use d3.js in Phoenix?如何在 Phoenix 中使用 d3.js？
【发布时间】：2017-04-23 00:45:25
【问题描述】：

我正在尝试将 Ruby on Rails + d3.js 应用程序转换为 Phoenix + d3.js 上的 Elixir。我似乎无法让 d3.js 正确加载。

我在 web/static/vendor/js/d3.v3.min.js 中有它。而我的 brunch-config.js 在部分之前有一个订单，如下所示：

order: {
 before: [
   "web/static/vendor/jquery.min.js",
   "web/static/vendor/js/jquery-placeholder/jquery.placeholder.min.js",
   "web/static/vendor/js/jquery.bootgrid.min.js",
   "web/static/vendor/js/jquery.mCustomScrollbar.concat.min.js",
   "web/static/vendor/js/jquery.sparkline.min.js",
   "web/static/vendor/js/bootstrap.min.js",
   "web/static/vendor/js/moment.min.js",
   "web/static/vendor/js/fullcalendar.min.js",
   "web/static/vendor/js/d3.v3.min.js",
   "web/static/vendor/js/sugar-full.min.js",
   "web/static/vendor/js/waves.js"
 ]
}

我有一个带有脚本标签的模板，其中包含 d3 javascript。但是，它会出错：

graph:259 Uncaught ReferenceError: d3 is not defined

我错过了什么？

【问题讨论】：

您能否在您的网络/资源选项卡中确认d3.v3.min.js 确实已加载？

标签： javascript d3.js elixir phoenix-framework brunch

【解决方案1】：

您的浏览器中很可能存在安全限制，导致 D3 无法正确下载。

最好的办法是手动获取 D3.JS 和相关脚本，然后将它们放在与图形/网页源代码相同的文件夹中。

然后您需要做的是在 HTML 中找到引用 D3.JS 和其他文件的 .. 标记，并将它们更改为您复制到 HTML 页面文件夹的关联文件的名称。

【讨论】：