javascript - 如何使用 python Flask 应用程序在 d3js 图表中动态加载 json 数据

Question

我正在研究this d3JS example for creating a treemap 。该示例使用flare.json 作为包含json 数据的文件。

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

这是当前从flare.json 文件加载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)

Answer 1

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

在您的回调中，我认为您不需要添加 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>