0

I have a FLask app with some html files on my templates/ folder. I wanted to add a nice D3 visualization to my index.html, so first I tried to copy/paste this bubbles example into a file called bubbles.html on my templates/ folder: http://bl.ocks.org/mbostock/4063269

enter image description here

I tried to open bubbles.html with Firefox, but got just white space, where the bubbles should be. And here is the strange thing. When I took bubbles.html out of the templates/ folder and opened it from a different directory, the page loaded correctly.

What is the problem? How can I incorporate this plot into my app?

4

1 回答 1

2

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

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

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

于 2014-01-26T06:04:41.053 回答