D3 从 Python 函数中获取数据答案

【问题标题】：D3 Fetch Data from Python FunctionD3 从 Python 函数中获取数据
【发布时间】：2015-05-22 22:43:10
【问题描述】：

我有一个名为 /CastCrew 的 Python 函数，它填充表单并返回所选的 .json 文件名。这个选择的 json 文件用于创建 d3 图表，但是当我在选择一个文件后按“提交”时，我会收到一个“打开 CastCrew”的消息框（当我打开它时，我会看到我选择的 json 文件），它正在打开文件，D3 没有读取该文件。

这是 Flask 中的@app.route，

@app.route('/CastCrew', methods=['GET', 'POST'])
def crew():
    form = CrewForm()
    if form.validate_on_submit():
        return current_app.send_static_file(os.path.join('Crews/', form.filename.data))

    return render_template('Crew.html', form=form)

对于 D3，我想这样调用文件 –

d3.json("/CastCrew", function(error, graph) {
          force
              .nodes(graph.nodes)
              .links(graph.links)
              .start();

我也尝试了 url_for，但没有任何区别

d3.json("{{ url_for('CastCrew') }}", function(error, graph) {

在this tutorial中，通过调用d3中的Python函数来请求数据。

为什么这对我不起作用？

【问题讨论】：

看来您正在将数据作为 HTML 模板发回，而不是 d3 可以使用的 json 或 csv。仔细查看链接中烧瓶示例中的返回格式。
哎呀，我看到你有两个回报。你确认你得到了正确的格式吗？
@Radio 是的，当我打开文件时，它是正确的 json 文件，json 格式:)

标签： javascript python json d3.js flask

【解决方案1】：

您需要使用 JavaScript 发布表单。如果你没有重写提交事件，当你点击按钮时浏览器只会提交一个正常的请求，它只会返回文件。

此外，d3.json(url, callback) 发出 GET 请求，但视图从 POST 请求中发送 json 文件。请改用d3.json(url).post(data, callback) 发送帖子。您还需要发送表单数据。

这是一个如何使用 JQuery 来实现的示例。

$('form').submit(function(event) {
    event.preventDefault();
    d3.json("{{ url_for('crew') }}")
        .header('Content-Type', 'application/x-www-form-urlencoded')
        .post($(this).serialize(), function(error, graph) {
            # show your graph
        });
});

如果你仍然愿意使用 JQuery，你不妨使用它来发出 post 请求，而不是使用 D3，因为它更直接。

$('form').submit(function(event) {
    event.preventDefault();
    $.post("{{ url_for('crew') }}", $(this).serializeArray(), function(graph) {
        # show your graph
    });
});

Here is a full working example of this code.

【讨论】：