我有一个 FLask 应用程序，在我的 templates/文件夹中包含一些 html 文件。我想向我的 index.html 添加一个漂亮的 D3 可视化效果，所以首先我尝试将此 bubbles 示例复制/粘贴到我的 templates/文件夹中名为 bubbles.html 的文件中: http://bl.ocks.org/mbostock/4063269
我尝试用 Firefox 打开 bubbles.html，但只看到了空白，而气泡应该在的位置。奇怪的是。当我从 templates/文件夹中取出 bubbles.html 并从另一个目录打开它时，页面加载正确。
有什么问题吗？如何将此图合并到我的应用程序中？
最佳答案
确保您的文件由 http 服务器正确提供服务。这里的主要问题是您是否将 json 直接粘贴到您正在创建的 index.html 中，或者是否使用单独的 json 文件。
d3.json 进行 ajax 调用来加载 json 文件。为了发出此 json 请求，您必须有一个 http 服务器为包含单独 json 文件的目录提供服务。这很可能就是当您更改目录(可能是某个服务器正在提供服务的目录)时会出现预期图表的原因。如果您以内联方式将 d3.json 调用替换为对 json 的引用，则不需要服务器。相反，您应该能够使用浏览器从文件系统静态查看示例，无论它位于哪个目录。
需要服务器的原因是 w3c 标准中描述的同源策略。您可以在此找到一个简单的解决方案。帖子:D3 Bar Graph example not working locally 。它提供了两种解决方案，要么为正在提供文件的目录生成一个 http 服务器，要么修改浏览器中的同源策略。由于安全标准，我建议使用服务器方法。
关于javascript - html 文件无法从我的模板文件夹中运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21359606/