[英]Load csv file in d3.js using absolute path
如果 csv 文件位于同一工作目录中,我可以加载它,例如:
.defer(d3.csv,"data.csv", function(d) { .. })
但是如果文件在另一个目录中并且我传递了绝对路径,则不会加载该文件:
.defer(d3.csv,"/home/path/data.csv", function(d) {..})
我得到代码 404,消息文件未找到
我已经在运行本地 web 服务器
编辑
我正在关注本教程:
https://www.d3-graph-gallery.com/graph/choropleth_basic.html这是索引。html
<script>
// The svg
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Map and projection
var path = d3.geoPath();
var projection = d3.geoMercator()
.scale(70)
.center([0,20])
.translate([width / 2, height / 2]);
// Data and color scale
var data = d3.map();
var colorScale = d3.scaleThreshold()
.domain([10, 30, 40, 50, 70, 100])
.range(d3.schemeBlues[7]);
// Load external data and boot
d3.queue()
.defer(d3.json, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson")
.defer(d3.csv, "data.csv", function(d) { data.set(d.codice, d.rtt); })
.await(ready);
function ready(error, topo) {
// Draw the map
svg.append("g")
.selectAll("path")
.data(topo.features)
.enter()
.append("path")
// draw each country
.attr("d", d3.geoPath()
.projection(projection)
)
// set the color of each country
.attr("fill", function (d) {
d.total = data.get(d.id) || 0;
return colorScale(d.total);
});
}
</script>
如果文件data.csv
与 index.html 的目录相同,则该文件有效,但如果它在另一个目录中则无效,我得到:
code 404, message File not found
Uncaught TypeError: topo is undefined
ready http://localhost:8000/:43
_call https://d3js.org/d3.v4.js:11174
maybeNotify https://d3js.org/d3.v4.js:11251
abort https://d3js.org/d3.v4.js:11244
end https://d3js.org/d3.v4.js:11218
call https://d3js.org/d3.v4.js:792
respond https://d3js.org/d3.v4.js:11397
编辑 2
尝试直接加载 csv 文件而不以这种方式下载它,但不起作用:
if (rows.length == 5) {
createmap(createcsv(rows))
}
function createcsv(rows) {
let csvContent = "data:text/csv;charset=utf-8,";
csvContent ="codice,rtt"+"\r\n";
rows.forEach(function(rowArray) {
let row = rowArray.join(",");
csvContent +=row+"\r\n";
});
return csvContent;
}
function createmap(map) {
d3.queue()
.defer(d3.json, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson")
.defer(d3.csv, mappa, function(d) { data.set(d.codice, d.rtt); })
.await(ready)
}
这里有几件事:
确保您的 data.csv 和 dat.csv 命名不是问题。
您是否尝试访问不在本地主机权限的 scope 中的目录? 您需要允许www-data
访问该路径。 看来您正在尝试访问 /home/path/ ,它很可能不在 www-data 访问的 scope 之下。 或者只是尝试将 data.csv 放在/var/www/yourapplication/path/
中的某个位置。 它可能会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.