D3 条形图示例在本地不起作用 [英] D3 Bar Graph example not working locally
问题描述
我对 D3 很陌生，想看看示例如何在本地工作.我将条形图代码复制并粘贴到名为 index.html 的本地文件中，并且还复制了 data.tsv.出于某种原因，当我在浏览器上打开文件时，绝对没有任何显示！我尝试将脚本 src 更改为d3/d3.v3.min.js"，因为这是我下载的 d3 所在的文件夹.但是，这也不起作用.对于我尝试过的每个示例，我还没有成功查看 D3 示例.帮助将不胜感激！
I am very new to D3, and wanted to see how an example would work locally. I copied and pasted the bar graph code to a local file called index.html, and also copied over the data.tsv. For some reason, absolutely nothing is showing up when I open the file on a browser! I tried changing the script src to "d3/d3.v3.min.js" because that is the folder the d3 I downloaded is in. However, this does not work either. For every example I have tried I have yet to successfully view a D3 example. Help would be appreciated!
index.html 代码如下:
The index.html code is as follows:
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
</style>
<body>
<script src="d3/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(formatPercent);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("data.tsv", type, function(error, data) {
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); });
});
function type(d) {
d.frequency = +d.frequency;
return d;
}
</script>
并且 data.tsv 的格式如下:字母频率.08167乙.01492C .02780D .04253E .12702F .02288G .02022H .06094我.06973
and the data.tsv is in the following format: letter frequency A .08167 B .01492 C .02780 D .04253 E .12702 F .02288 G .02022 H .06094 I .06973
推荐答案
d3.tsv 方法对数据发出 AJAX 请求.在大多数浏览器上，由于 同源政策，这在本地不起作用通常禁止对 file:/// url 的 AJAX 请求.
The d3.tsv method makes an AJAX request for data. On most browsers, this won't work locally due to the Same Origin Policy, which generally prohibits AJAX requests to file:/// urls.
要获取使用本地运行的 AJAX 的示例，您需要一个本地网络服务器.如果你有 Python，运行
To get an example that uses AJAX running locally, you'll need a local webserver. If you have Python, running
> python -m SimpleHTTPServer
从包含您的文件的目录中的命令行执行此操作.
from the command line in the directory with your files will do it.
如果你使用的是 python 3
and if you are using python 3
> python -m http.server 9000
如果您更喜欢 node.js，请尝试 http-server.
If you prefer node.js, try http-server.
这篇关于D3 条形图示例在本地不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
