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

我正在工作。该示例使用flare.json作为包含json数据的文件

然而，我希望这个json数据从我的python flask应用程序发送并加载到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)

app=flask.flask（名称）
@附件路线（“/”）
def index（）：
"""
当您请求根路径时，您将获得index.html模板。
"""
返回flask.render_模板（“index.html”）
@应用程序路径（“/data”）
@应用程序路径（“/data/”）
def data（）：
d3js_图表_数据=json.dumps(
{//JSON here}
)
返回d3js_图表_数据
如果名称=“\uuuuu main\uuuuuuuu”：
导入操作系统
端口=80
#打开指向应用程序的web浏览器。
操作系统（“开放http://localhost:{0}.格式（端口））
#在端口8000上设置开发服务器。
app.debug=True
app.run（host='0.0.0.0'，port=port）

我认为您只需在

d3.json（url，function（…））中将url添加到您的服务器上，它就可以为您工作了。不需要进行单独的回调，但如果您愿意，可以使用单独的回调进行操作

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

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

请在下面找到一个使用mocky.io中数据的工作演示。它正是treemap演示中的代码，只是数据来自不同的位置，并在通过回调单击按钮后加载

你也可以在这里找到同样的


var保证金={
前40名，
右:10,，
底部：10，
左：10
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var color=d3.scale.category20c（）；
var treemap=d3.layout.treemap（）
.尺寸（[宽度、高度]）
.粘性（真）
.价值（功能（d）{
返回d.size；
});
var div=d3.选择（“主体”）.追加（“div”）
.风格（“位置”、“相对”）
.style（“宽度”，“宽度+边距.左+边距.右）+“px”）
.style（“高度”，“高度+边距.顶部+边距.底部）+“px”）
.style（“左”，margin.left+“px”）
.style（“top”，margin.top+“px”）；
变量url=”http://www.mocky.io/v2/5491ee0450e288460f8b77a5";
var dispatcher=d3.dispatch（'jsonLoad'）；
d3.选择（“#加载数据”）。在（'click'，function（）上{
d3.json（url，回调）；
});
//可选调度器
dispatcher.on（'jsonLoad'，函数（数据）{
//加载json后触发（如果您想在此处执行其他操作）
控制台日志（数据）；
});
var callback=函数（错误，根）{
dispatcher.jsonLoad（root）；//可以触发一个新数据在此处的事件
变量节点=div.datum（根）。选择全部（“.node”）
.data（树映射节点）
.enter（）.append（“div”）
.attr（“类”、“节点”）
.电话（职位）
.风格（“背景”，功能（d）{
返回d.children？颜色（d.name）：空；
})
.文本（功能（d）{
返回d.children？空：d.name；
});
d3.选择全部（“输入”）。打开（“更改”，功能更改（）{
var value=this.value==“count”？函数（）{
返回1；
}：功能（d）{
返回d.size；
};
数据（treemap.value（value.nodes）
.transition（）
.持续时间（1500）
.呼叫（职位）；
});
};
函数位置（）{
此。样式（“左”，功能（d）{
返回d.x+“px”；
})
.样式（“顶部”，功能（d）{
返回d.y+“px”；
})
.样式（“宽度”，功能（d）{
返回数学最大值（0，d.dx-1）+“px”；
})
.样式（“高度”，功能（d）{
返回数学最大值（0，d.dy-1）+“px”；
});
}
正文{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
保证金：自动；
位置：相对位置；
宽度：960px；
}
形式{
位置：绝对位置；
右：10px；
顶部：10px；
}
.节点{
边框：纯色1px白色；
字体：10px无衬线；
线高：12px；
溢出：隐藏；
位置：绝对位置；
文本缩进：2px；
}

大小
计数
加载数据
我认为您只需在
d3.json（url，function（…）
中将url添加到您的服务器上，它就可以为您工作了。不需要进行单独的回调，但如果您愿意，可以使用单独的回调来完成

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

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

请在下面找到一个使用mocky.io中数据的工作演示。它正是treemap演示中的代码，只是数据来自不同的位置，并在通过回调单击按钮后加载

你也可以在这里找到同样的


var保证金={
前40名，
右:10,，
底部：10，
左：10
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var color=d3.scale.category20c（）；
var treemap=d3.layout.treemap（）
.尺寸（[宽度、高度]）
.粘性（真）
.价值（功能（d）{
返回d.size；
});
var div=d3.选择（“主体”）.追加（“div”）
.风格（“位置”、“相对”）
.style（“宽度”，“宽度+边距.左+边距.右）+“px”）
.style（“高度”，“高度+边距.顶部+边距.底部）+“px”）
.style（“左”，margin.left+“px”）
.style（“top”，margin.top+“px”）；
变量url=”http://www.mocky.io/v2/5491ee0450e288460f8b77a5";
var dispatcher=d3.dispatch（'js