我正在研究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)
答案 0 :(得分:3)
我认为您只需要在d3.json(url, function(...)
中将网址添加到您的服务器,它应该适合您。没有必要进行单独的回调,但如果您愿意,可以使用单独的回调来执行此操作。
在你的回调中,我认为你不需要添加data
参数,因为数据是root。
(如果您从其他站点请求数据,则服务器需要启用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>