локальный хост, чтобы открыть HTML-файл - PullRequest
Новая
       19

локальный хост, чтобы открыть HTML-файл

0 голосов
/ 25 мая 2018

Я изучаю d3 и пытаюсь открыть html-файл на моей локальной машине.

Когда я использую локальный сервер с использованием Python, тогда нет проблем с открытием файла.

Однако я хочу пропустить этот шаг.

Итак, в Sublime я создал ярлык в Инструменты> Система сборки> Новая система сборки, как показано ниже.

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

После настройки я могу открыть файл, нажав Ctrl + 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 надежна.Если кто-нибудь знает другие способы открыть 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>

1 Ответ

0 голосов
/ 26 мая 2018

Происходит несколько вещей:

Первая ошибка, которую вы получаете: 

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

Это потому, что данные загружаются некорректно (следовательно, null).Это потому, что вы открываете файл непосредственно в Chrome, и Chrome обрабатывает страницу иначе, чем если бы вы загружали его через веб-сервер.Возможно, вам больше повезет с Firefox, который имеет тенденцию быть менее строгим в отношении загрузки файлов.

Обычно вам следует открывать и тестировать страницы через веб-сервер, как вы делаете это с вашим сервером Python, потому что он отражает веб-средуближе.Как вы видели, когда вы открывали страницу через веб-сервер, вы не получили эту ошибку.

Другая ошибка, которую вы получаете, 

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

Указывает, что вы пытаетесьвызвать функцию, которая не существует.Если вы внимательно посмотрите на это, вы увидите, что calls, вероятно, не прав.Это должно быть call.После того, как я исправил этот экземпляр в строке 59, а другой - в строке 64, он загрузился для меня.

...