Локальный хост для открытия html файла
Я изучаю d3 и пытаюсь открыть html-файл на своем локальном компьютере.
Когда я использую локальный сервер с Python, тогда нет проблем с открытием файла.
Однако я хочу пропустить этот шаг.
Итак, в Sublime я создал ярлык в Инструменты> Система сборки> Новая система сборки, как показано ниже.
{
"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. Если кто-нибудь знает другие способы открыть 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>
@jdv, Спасибо за ответ. Я хотел сделать пост простым. Но я буду признателен, если вы пройдете через мой код. Я редактирую свой вопрос, добавляя свой код. Большое спасибо.
Ответы 1
Происходит несколько вещей:
Первая ошибка, которую вы получите:
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, он загрузился для меня.
Спасибо, Стив, теперь я понимаю, что две настройки показали разные ошибки.
Вы должны показать свой код - хотя бы минимальный воспроизводимый пример