如何使用Python Flask应用程序在D3JS图表中动态加载JSON数据

how to dynamically load json data in d3js chart using python flask application

本文关键字：动态 加载 数据 JSON D3JS Python 何使用 Flask 应用程序      更新时间：2023-09-26

我正在研究这个 d3JS 示例来创建树状图。该示例使用 flare.json 作为文件来包含 json 数据。

但是，我希望此json数据从我的python烧瓶应用程序发送并加载到javascript中。

以下是 JSON 当前从 flare.json 文件加载的方式：

d3.json("flare.json", function(error, root) {
  var node = div.datum(root).selectAll(".node")
      .data(treemap.nodes)
    .enter().append("div")
      .attr("class", "node")
      .call(position)
      .style("background", function(d) { return d.children ? color(d.name) : null; })
      .text(function(d) { return d.children ? null : d.name; });
  d3.selectAll("input").on("change", function change() {
    var value = this.value === "count"
        ? function() { return 1; }
        : function(d) { return d.size; };
    node
        .data(treemap.value(value).nodes)
      .transition()
        .duration(1500)
        .call(position);
  });
});

我想以某种方式修改它并实现这样的东西：

// Load the data.
var callback = function(data, error, root) {
     var node = div.datum(root).selectAll(".node")
        .data(treemap.nodes)
        .enter().append("div")
        .attr("class", "node")
        .call(position)
        .style("background", function(d) { return d.children ? color(d.name) : null; })
        .text(function(d) { return d.children ? null : d.name; });
      d3.selectAll("input").on("change", function change() {
        var value = this.value === "count"
            ? function() { return 1; }
            : function(d) { return d.size; };
        node
            .data(treemap.value(value).nodes)
            .transition()
            .duration(1500)
            .call(position);
      });
};
d3.json("/data", callback);

这目前对我不起作用。

在我的 app.py 文件中，这是我的一些代码：

app = flask.Flask(__name__)

@app.route("/")
def index():
    """
    When you request the root path, you'll get the index.html template.
    """
    return flask.render_template("index.html")

@app.route("/data")
@app.route("/data/<int:ndata>")

def data():
    d3js_chart_data = json.dumps(
                                    { //JSON here }
                                )
    return d3js_chart_data
if __name__ == "__main__":
    import os
    port = 80
    # Open a web browser pointing at the app.
    os.system("open http://localhost:{0}".format(port))
    # Set up the development server on port 8000.
    app.debug = True
    app.run(host='0.0.0.0', port=port)

我认为您只需要在d3.json(url, function(...)中将URL添加到服务器，它应该对您有用。无需执行单独的回调，但如果您愿意，可以使用单独的回调来完成。

在您的回调中，我认为您不需要添加 data 参数，因为数据在根目录中。

(如果要从其他站点请求数据，服务器需要启用 CORS 以允许跨源请求。

请在下面找到包含 mocky.io 数据的工作演示。这正是树状图演示中的代码，只是数据来自不同的位置，并在单击按钮并回调后加载。

你也可以在jsFiddle找到相同的内容。

var margin = {
    top: 40,
    right: 10,
    bottom: 10,
    left: 10
},
width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
var color = d3.scale.category20c();
var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    .value(function (d) {
    return d.size;
});
var div = d3.select("body").append("div")
    .style("position", "relative")
    .style("width", (width + margin.left + margin.right) + "px")
    .style("height", (height + margin.top + margin.bottom) + "px")
    .style("left", margin.left + "px")
    .style("top", margin.top + "px");
var url = "http://www.mocky.io/v2/5491ee0450e288460f8b77a5";
var dispatcher = d3.dispatch('jsonLoad');
d3.select('#loadData').on('click', function() {
    d3.json(url, callback);
});
// optional dispatcher
dispatcher.on('jsonLoad', function(data) {
    // triggered afer json is loaded (just if you want to do additional stuff here.)
    console.log(data);
});
var callback = function (error, root) {
        dispatcher.jsonLoad(root); // can trigger an event that new data are here
        var node = div.datum(root).selectAll(".node")
            .data(treemap.nodes)
            .enter().append("div")
            .attr("class", "node")
            .call(position)
            .style("background", function (d) {
            return d.children ? color(d.name) : null;
        })
            .text(function (d) {
            return d.children ? null : d.name;
        });
        d3.selectAll("input").on("change", function change() {
            var value = this.value === "count" ? function () {
                    return 1;
                } : function (d) {
                    return d.size;
                };
            node.data(treemap.value(value).nodes)
                .transition()
                .duration(1500)
                .call(position);
        });
    };
function position() {
    this.style("left", function (d) {
        return d.x + "px";
    })
        .style("top", function (d) {
        return d.y + "px";
    })
        .style("width", function (d) {
        return Math.max(0, d.dx - 1) + "px";
    })
        .style("height", function (d) {
        return Math.max(0, d.dy - 1) + "px";
    });
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}
form {
  position: absolute;
  right: 10px;
  top: 10px;
}
.node {
  border: solid 1px white;
  font: 10px sans-serif;
  line-height: 12px;
  overflow: hidden;
  position: absolute;
  text-indent: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<form>
    <label><input type="radio" name="mode" value="size" checked="true" /> Size</label>
        <label><input type="radio" name="mode" value="count"/> Count</label>
</form>
<button id="loadData">Load data</button>

相关文章：