Question

我目前正在学习d3.js进行可视化，使用Flask作为python后端，并在this example显示两个在同一页面上具有不同数据集的简单图表。

我正在尝试以下修改：我不想使用CSV，而是想从python后端传递一个json文件（该示例只是从两个csv文件中读取数据）。我如何通过2个json数据集？我可以按如下方式传递一个：

Python后端

import flask...

app = flask.Flask(__name__)

@app.route("/")
def index():
    return flask.render_template("index.html")

@app.route("/data")
def data():
    x = [1, 2, 3, 4, 5]
    y = [1, 2, 3, 4, 5]
    js = [{"x":x[i], "y":y[i]} for i in range(len(x))]

    return json.dumps(js)

的index.html

<script>
d3.json("/data", function(data) ...)
</script>

我尝试编写另一个python函数，比如def data_bar来返回一个单独的json数据集，但是无法读取。从理论上讲，我可以在一个json数据集中传递两个数据集，如：

x = [1,2,3,4,5]
y = [1,2,3,4,5]
x1 = [10,20,30]
y1 = [40,50,60]

但是如果第一组（x和y）和第二组（x1和y1）的域不相同，则会遇到问题。例如第一组可以是“student_name”和“grade”，第二组可以是“class_name”和“average_grade”。

Answer 1

使用传入的一个数据集进行渲染：

return render_template("result.html",resultVarInHtml = myData)

传递了多个数据集的

渲染：

return render_template("result.html",resultVarInHtml = myData, resultVarInHtml2 = myData2)

现在我加载result.html

我可以使用此代码显示我的数据（假设一个键值字典对象，但你明白了）

results.html

<!doctype html>
<html>
   <body>
   <p>First Data Set</p>
      <table border = 1>
         {% for key, value in resultVarInHtml.iteritems() %}

            <tr>
               <th> {{ key }} </th>
               <td> {{ value }} </td>
            </tr>

         {% endfor %}
      </table>
      <p>2nd Data Set</p>
      <table border = 1>
         {% for key, value in resultVarInHtml2.iteritems() %}

            <tr>
               <th> {{ key }} </th>
               <td> {{ value }} </td>
            </tr>

         {% endfor %}
      </table>
   </body>
</html>

你会得到一张合适的桌子，伙计。

Flask + d3.js：将多个数据集传递给html

1 个答案: