html 文件不在我的模板文件夹中运行

Question

我有一个 Flask 应用程序，我的模板/文件夹中有一些 html 文件。我想在我的 index.html 中添加一个漂亮的 D3 可视化效果，所以首先我尝试将这个气泡示例复制/粘贴到我的模板/文件夹中名为 bubbles.html 的文件中： http://bl.ocks.org/mbostock/4063269

我尝试使用 Firefox 打开 bubbles.html，但只得到了空白区域，应该是气泡所在的位置。这是奇怪的事情。当我从 templates/ 文件夹中取出 bubbles.html 并从另一个目录打开它时，页面加载正确。

有什么问题？如何将此图合并到我的应用程序中？

Answer 1

确保您的文件由 http 服务器正确提供。这里的主要问题是您是否将 json 直接粘贴到您正在创建的 index.html 中，或者您是否使用单独的 json 文件。

d3.json 进行 ajax 调用以加载 json 文件。为了发出这个 json 请求，您必须有一个 http 服务器为包含单独的 json 文件的目录提供服务。这很可能是为什么当您更改目录（可能是某个服务器正在提供服务的目录）时出现预期图表的原因。相反，如果您以内联方式将 d3.json 调用替换为对 json 的引用，则不需要服务器。相反，您应该能够使用浏览器从文件系统中静态查看示例，无论它位于哪个目录中。

需要服务器的原因是由于 w3c 标准中描述的相同来源策略。您可以在这个 s.o. 中找到一个简单的解决方案。帖子：D3 Bar Graph example not working locally。它提供了两种解决方案，要么为提供文件的目录生成 http 服务器，要么在浏览器中修改相同的源策略。由于安全标准，我推荐使用服务器方法。