本地主机打开 html 文件

Question

我正在学习 d3 并尝试在我的本地机器上打开一个 html 文件。

当我使用 Python 使用本地服务器时，打开文件没有问题。

不过，我想跳过这一步。

所以在 Sublime 中，我在 Tools > Build System > New Build System 中创建了一个快捷方式，如下所示。

{
 "cmd": ["C:\Program Files (x86)\Google\Chrome\Application\chrome.exe", "$file"]
}

设置完成后，我可以按 ctr+b 打开文件。但有时它似乎不起作用。当它不起作用时，它会显示此错误消息：

Failed to load _path_of_file_: Cross origin requests are only supported for protocol 
schemes: http, data, chrome, chrome-extension, https.send @ d3.v4.min.js:2

如果它不起作用，我会感到困惑，因为我的文件包含错误或设置不起作用。

更奇怪的是，当我打开控制台（ctr+shift+j）时，控制台会显示我文件中的错误所在。例如，

Uncaught TypeError: Cannot read property 'forEach' of null
    at index.html:32

我知道我的代码中的第 32 行可能是错误的。

但是当我通过Python本地服务器打开同一个文件时，错误的地方是不同的。例如，

Uncaught TypeError: svg.append(...).attr(...).calls is not a function
    at index.html:59

这样，错误就在第59行。

可能是因为我的代码有很多错误？控制台随机显示任何错误？

或者是sublime里面的设置有问题？

基本上就是担心Sublime里的设置靠谱不。如果有人知道不使用本地服务器打开 html 文件的其他方法，也请告诉我。

非常感谢阅读本文，

--

这是我在 d3 中的代码

    <!DOCTYPE html>
    <meta charset = 'utf-8'>

    <body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>

    var w = 960,
        h = 500;

    var parseTime = d3.timeParse('%Y');

    var xScale = d3.scaleTime().range([0, w]);
    var yScale1 = d3.scaleLinear().range([h, 0]);
    var yScale2 = d3.scaleLinear().range([h, 0]);

    var line1 = d3.line()
                .x(function(d) {return xScale(d.time); })
                .y(function(d) {return yScale1(d.value); });

    var line2 = d3.line()
                .x(function(d) {return xScale(d.time); })
                .y(function(d) {return yScale2(d.gdp/1000); }); 

    var svg = d3.select('body')
                .append('svg')
                .attr('width', w)
                .attr('height', h); 

    d3.csv("data.csv", function(d) {

        d.forEach(function(d) {
            d.date = parseTime(d.time),
            d.value = + d.value;
            d.gdp = + d.gdp_per_capita;
        }); 

        xScale.domain(d3.extent(d, function(d) { return d.date; }));
        yScale1.domain(d3.extent(d, function(d) { return d.value;}));
        yScale2.domain(d3.extent(d, function(d) { return d.gdp/1000; }));

        svg.append('path')
            .data([d]) 
            .attr('class', 'line')
            .attr('d', line1);

        svg.append('path')
            .data([d]) 
            .attr('class', 'line')
            .style('stroke', 'red')
            .attr('d', line2);

        svg.append('g')
            .attr('transform', 'translate(0,' + h + ')')
            .call(d3.axisBottom(xScale));

        svg.append('g')
            .attr('class', 'axisLeft')
            .calls(d3.axisLeft(yScale1));

        svg.append('g')
            .attr('class', 'axisRight')
            .attr('transform', 'translate(' + w + ', 0)')
            .calls(d3.axisRight(yScale2));
    });    
    </script>
</body>

Answer 1

发生了一些事情：

您遇到的第一个错误：

Uncaught TypeError: Cannot read property 'forEach' of null
    at index.html:32

是因为数据加载不正确（因此是 null）。那是因为您直接在 Chrome 中打开文件，并且 Chrome 处理页面的方式与您通过 Web 服务器加载页面的方式不同。您可能更喜欢 Firefox，它对文件加载的要求不那么严格。

通常您应该通过网络服务器打开和测试页面，就像您使用 Python 服务器一样，因为它更接近地反映了网络环境。如你所见，当你通过网络服务器打开页面时，你没有得到这个错误。

您遇到的另一个错误，

Uncaught TypeError: svg.append(...).attr(...).calls is not a function
     at index.html:59

表示您正在尝试调用一个不存在的函数。如果你仔细看，你会发现 calls 可能是不对的。应该是call。在我修复第 59 行的那个实例和第 64 行的另一个实例后，它为我加载了。

本地主机打开 html 文件

local host to open html file

html

localserver

d3.js

sublimetext3