gpt4 book ai didi

javascript - 当源保存在文件中时,D3.js 图表不出现

转载 作者:行者123 更新时间:2023-12-02 17:46:54 25 4
gpt4 key购买 nike

HTML新手问题

我正在尝试使用 D3.js 绘制图表

我想学习的例子可以在 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>所以我不认为我遗漏了任何脚本。

最佳答案

您无法仅在浏览器中打开 .html 文件并让脚本运行,您需要通过 HTTP 服务器提供服务。 Python内置的SimpleHTTPServer是一个不错的选择。只需 cd 到终端中包含 HTML 文件的目录,然后输入 python -m SimpleHTTPServer。现在,您应该能够通过打开浏览器并访问终端中列出的 IP 地址和端口来查看它。

关于javascript - 当源保存在文件中时,D3.js 图表不出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21667510/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com