为什么我需要启动Web服务器才能使用d3?

时间:2018-05-29 11:54:36

标签: d3.js webserver

我阅读了各种d3js教程,没有人解释为什么要使用d3,你需要启动一个Web服务器(无论是在Python还是Node,......)。

那么,为什么有必要呢?

1 个答案:

答案 0 :(得分:2)

有时候没有必要。但一般来说,最好复制一下您的代码将被查看的环境,这样您在发布时就不会遇到无法预料的问题,或者由于使用的环境不适合您的技术而导致不必要的挫折。

d3旨在在浏览器中运行,其中某些部分需要在某些浏览器的网页上运行。根据我的经验,使用file URI直接在浏览器中打开d3页面时出现的问题,即file://,分为两类:安全性和无方案网址。

安全限制

file://协议通常有其他限制。与d3特别相关的是使用XMLHttpRequest(在d3v4及以下版本中使用)和fetch(在d3v5中使用)的限制,它们构成了加载数据文件的基础(例如,使用d3.csv

Chrome和其他浏览器通常不会对本地文件发出XMLHttpRequestfetch次请求。您可能会收到类似以下内容的错误:

  

交叉源请求仅支持协议方案:http,   数据,铬,铬扩展,https

您可以阅读有关如何从本地文件启用异步读取的更多信息以及默认情况下从此回答中禁用它的原因:https://stackoverflow.com/a/18137280/6184972

但是,Firefox似乎没有这个限制。

无方案网址

一些d3示例,特别是旧版本,包括使用此约定的d3:

<script src="//d3js.org/d3.v3.min.js"></script>

//d3js.org无方案网址(也称为协议相对网址),这意味着浏览器可以决定使用哪种协议。这意味着如果加载页面使用https,它将使用https://d3js.org,如果加载页面使用http,则可能使用http://d3js.org

不幸的是,当通过file://协议加载文件时,这意味着前面提到的URL将引用file://d3js.org/d3.v3.min.js,这通常不是预期的。在这种情况下,您可能会收到如下错误:

  

获取文件://d3js.org/d3.v3.min.js net :: ERR_FILE_NOT_FOUND

     

未捕获的ReferenceError:未定义d3

使用无方案网址已失宠,而不是总是使用https://。请参阅:https://stackoverflow.com/a/31100809/6184972

如果这是您遇到的唯一问题,可以通过加入协议来解决(即将src="//d3js.org/d3.v3.min.js"更改为src="https://d3js.org/d3.v3.min.js"

其他参考文献:

https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server#The_problem_with_testing_local_files