在ES6模块中使用GraphViz
当我尝试将GraphViz加载到ES6模块中时，我会遇到有关的错误。
(index):284 GET https://anki.wip/build/graphvizlib.wasm 404
__webpack_require__.O @ chunk loaded:23
(anonymous) @ app.scss?8f59:1
webpackJsonpCallback @ jsonp chunk loading:72
(anonymous) @ app.js:1
index.js:184 Aborted(both async and sync fetching of the wasm failed)
abort @ index.js:184
getBinary @ index.js:184
我的设置非常简单，尽管我尝试了许多变体，
yarn add d3-graphviz
# installs [email protected]
然后在我已阅读的JS文件中
import { graphviz } from 'd3-graphviz';
graphviz('#test')
.fade(false)
.renderDot('digraph {a -> b}');
，并重新阅读，此问题是github at ，以及与Vue和Angular一起运行的各种问题，但仍然无法弄清楚。
我已经尝试在HTML文件中加载UNPKG，但是我的JavaScript模块无法访问GraphViz。
<script src="https://unpkg.com/[email protected]/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/@hpcc-js/[email protected]/dist/index.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.js"></script>
<script src="//d3js.org/d3.v5.min.js"></script>
有什么想法吗？
When I try to load graphviz in an ES6 module, I get errors about .wasm
(index):284 GET https://anki.wip/build/graphvizlib.wasm 404
__webpack_require__.O @ chunk loaded:23
(anonymous) @ app.scss?8f59:1
webpackJsonpCallback @ jsonp chunk loading:72
(anonymous) @ app.js:1
index.js:184 Aborted(both async and sync fetching of the wasm failed)
abort @ index.js:184
getBinary @ index.js:184
My set up is pretty simple, although I've tried many variations of this
yarn add d3-graphviz
# installs [email protected]
Then in my js file
import { graphviz } from 'd3-graphviz';
graphviz('#test')
.fade(false)
.renderDot('digraph {a -> b}');
I have read, and re-read, the issue on github at https://github.com/magjac/d3-graphviz/issues/152, and various issues related to running it with Vue and Angular, but still can't figure it out.
I've tried loading the unpkg in my HTML file, but then my javascript module doesn't have access to graphviz.
<script src="https://unpkg.com/[email protected]/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/@hpcc-js/[email protected]/dist/index.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.js"></script>
<script src="//d3js.org/d3.v5.min.js"></script>
Any ideas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
基本上，您需要像任何“静态资产”（如PNG或JPEG）一样对待WASM文件。基于浏览器在哪里寻找文件的位置，最快的解决方案就是简单地将WASM文件复制到您的公共文件夹。
在 @hpcc-js/wasm方面，请在此处查看“ wasmfolder”文档： https://github.com/hpcc-systems/hpcc-js-wasm#wasmfolder ，因为它可以让您覆盖默认位置。
Basically you need to treat the wasm file like any "static asset" (like a png or jpeg). Based on where the browser is looking for the file by default, the quickest solution is to simply copy the wasm file to your public folder.
On the @hpcc-js/wasm side take a look at the "wasmFolder" documentation here: https://github.com/hpcc-systems/hpcc-js-wasm#wasmFolder as it will let you override the default location.