Question

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

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

但是，我想跳过这一步。

所以在Sublime中，我在Tools＆gt;中构建了一个快捷方式。构建系统＆gt;新建系统如下。

{
 "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会以不同于您通过网络服务器加载页面的方式处理页面。你可能会对Firefox有更多的好运，而对文件加载的限制往往不那么严格。

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

你得到的另一个错误，

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

表示您正在尝试调用不存在的功能。如果仔细观察，可以看出calls可能并不正确。它应该是call。我在第59行修复了该实例，在第64行修复了另一个实例后，它为我加载了。

本地主机打开html文件

1 个答案: