本地主机打开html文件答案

【问题标题】：local host to open html file本地主机打开html文件
【发布时间】：2018-05-25 20:39:19
【问题描述】：

我正在学习 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>

【问题讨论】：

你应该显示你的代码——至少是一个minimal reproducible example
@jdv，谢谢您的回复。我想让帖子变得简单。但如果你能通过我的代码，我将不胜感激。我正在编辑我的问题，添加我的代码。非常感谢。

标签： html d3.js sublimetext3 localserver

【解决方案1】：

发生了一些事情：

你得到的第一个错误：

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

是因为数据没有正确加载（因此是null）。这是因为您是直接在 Chrome 中打开文件，而 Chrome 处理该页面的方式与您通过 Web 服务器加载该页面的方式不同。 Firefox 对文件加载的要求往往不那么严格。

通常，您应该通过 Web 服务器打开和测试页面，就像使用 Python 服务器一样，因为它更准确地反映了 Web 环境。如您所见，当您通过 Web 服务器打开页面时，您没有收到此错误。

您遇到的另一个错误，

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

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

【讨论】：

谢谢史蒂夫，现在我明白这两个设置显示了不同的错误。