python中的新功能和处理图形解决方案。面对问题,d3如何加载tsv数据。
在链接上获得所需的解决方案 - https://bl.ocks.org/mbostock/3884955。我从链接下载了html文件(作为index.html)和data.tsv。使用以下python脚本尝试呈现index.html。
问题不在于渲染html。但是d3如何加载tsv数据。 html和data.tsv很好。如果从pycharm加载html,它可以正常工作,加载数据并显示图形。
html文件,templates / index.html -
ResourcelessTransactionManager
数据文件,templates / data.tsv -
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis--x path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 80, bottom: 30, left: 50},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%Y%m%d");
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
z = d3.scaleOrdinal(d3.schemeCategory10);
var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.temperature); });
d3.tsv("data.tsv", type, function(error, data) {
if (error) throw error;
var cities = data.columns.slice(1).map(function(id) {
return {
id: id,
values: data.map(function(d) {
return {date: d.date, temperature: d[id]};
})
};
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(d) { return d.temperature; }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.temperature; }); })
]);
z.domain(cities.map(function(c) { return c.id; }));
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Temperature, ºF");
var city = g.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return z(d.id); });
city.append("text")
.datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
.attr("x", 3)
.attr("dy", "0.35em")
.style("font", "10px sans-serif")
.text(function(d) { return d.id; });
});
function type(d, _, columns) {
d.date = parseTime(d.date);
for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
return d;
}
</script>
index.html和data.tsv文件位于模板文件夹中。以下是用于呈现index.html(加载data.tsv - )
的python脚本date New York San Francisco Austin
20111001 63.4 62.7 72.2
20111002 58.0 59.9 67.7
20111003 53.3 59.1 69.4
20111004 55.7 58.8 68.0
20111005 64.2 58.7 72.4
20111006 58.8 57.0 77.0
20111007 57.9 56.7 82.3
20111008 61.8 56.8 78.9
.
.
.
当在pycharm上运行上面的脚本时,index.html文件不会呈现,我在控制台上出现以下错误 -
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
看起来d3.tsv无法加载data.tsv。请帮助使用上面的脚本正确呈现html。
问题不在于渲染html。但是d3如何加载tsv数据。 html和data.tsv很好。如果从pycharm加载html,它可以正常工作,加载数据并显示图形。
提前致谢..
答案 0 :(得分:2)
您正在尝试通过URL获取data.tsv文件(可能类似于http://localhost/data.tsv),但您的代码没有显示此URL的路由。所以你得到了404。
如果你想让你的Flask应用程序提供data.tsv文件,并且因为这个文件似乎是静态的,你应该将它放在静态目录(而不是模板目录)中然后包含它(这里有很多可能性,见在您的模板文件(比如index.html)中你的d3将完成工作。
根据d3的工作方式(我不知道它是什么),您可能需要以下其中一项:
修改强>
在阅读了d3.js代码的基本示例后,我设法使其工作:
确保您在应用代码中的某处配置了静态文件路径
app = Flask(名称)
app.static_url_path =&#39; /静态&#39;
将data.tsv文件放入静态文件目录
d3.tsv("/static/data/data.tsv", type, function(error, data) {
if (error) throw error;
var cities = data.columns.slice(1).map(function(id) {
return {
id: id,
values: data.map(function(d) {
return {date: d.date, temperature: d[id]};
})
};
});
&#13;
多数民众赞成!
答案 1 :(得分:0)
问题是d3无法找到文件data.tsv。关键注意事项是数据文件位置应为/static/data/data.tsv。