Question

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，它可以正常工作，加载数据并显示图形。

提前致谢..

Answer 1

您正在尝试通过URL获取data.tsv文件（可能类似于http://localhost/data.tsv），但您的代码没有显示此URL的路由。所以你得到了404。

如果你想让你的Flask应用程序提供data.tsv文件，并且因为这个文件似乎是静态的，你应该将它放在静态目录（而不是模板目录）中然后包含它（这里有很多可能性，见在您的模板文件（比如index.html）中你的d3将完成工作。

根据d3的工作方式（我不知道它是什么），您可能需要以下其中一项：

从指向index.html模板中的静态文件的URL加载文件
直接在模板中包含数据。为此，您的路线下的代码必须完成这项工作（阅读TSV并将其提供给您的模板进行处理）。在这种情况下，TSV文件可能不需要在模板文件夹中，也不需要在静态文件夹中。

修改

在阅读了d3.js代码的基本示例后，我设法使其工作：

确保您在应用代码中的某处配置了静态文件路径

app = Flask（名称）
app.static_url_path =＆＃39; /静态＆＃39;

将data.tsv文件放入静态文件目录

在 index.html 模板中，根据TSV文件的路径修改javascript部分中TSV文件的路径：

＆＃13;
＆＃13;
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;
＆＃13;
＆＃13;

多数民众赞成！

Answer 2

问题是d3无法找到文件data.tsv。关键注意事项是数据文件位置应为/static/data/data.tsv。

d3不会在python flask脚本中加载tsv数据

2 个答案: