0
новичка вопроса
HTMLD3.js график не отображается, если источник будет сохранен в файле
Я пытаюсь нарисовать график, используя D3.js
Пример, который я пытаюсь учиться у может быть found here
Я попытался сохранить исходный код в файл и открыть файл в chrome и IE, однако диаграмма не была отображена. Фактически вся страница пустая.
Исходный код здесь
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.chart rect {
fill: steelblue;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: middle;
}
</style>
<svg class="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var y = d3.scale.linear()
.range([height, 0]);
var chart = d3.select(".chart")
.attr("width", width)
.attr("height", height);
d3.tsv("data.tsv", type, function(error, data) {
y.domain([0, d3.max(data, function(d) { return d.value; })]);
var barWidth = width/data.length;
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });
bar.append("rect")
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.attr("width", barWidth - 1);
bar.append("text")
.attr("x", barWidth/2)
.attr("y", function(d) { return y(d.value) + 3; })
.attr("dy", ".75em")
.text(function(d) { return d.value; });
});
function type(d) {
d.value = +d.value; // coerce to number
return d;
}
</script>
Похоже, единственный включенный скрипт <script src="http://d3js.org/d3.v3.min.js"></script> , так что я не думаю, что мне не хватает каких-либо скриптов.
Вы загружали файл data.tsv так же хорошо? – FernOfTheAndes
Да, у меня это в том же каталоге. Вероятно, следовало бы это упомянуть. – sav