1
すべて D3のTreeMapの例を使用して、$ .getJSON経由で30秒ごとに動的に更新しようとしています。私はhttp://jsonlint.com/に行って、私のjsonが検証されたことを確認しました。私はすぐにTreeMapを構築するローカルjson文字列でTreeMapを開始します。しかし、なぜ私が30秒後にローカルホスト経由でツリーマップを更新しようとしたら、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトObject]を新しく更新されたテキスト文字列ではなく、私のjson文字列から削除します。 [オブジェクトオブジェクト]を実際のトークンに変更して、新しいテーブルを再作成して引き出すことはできますか？ 事前に感謝します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Update Tree Map</title>
<link rel="Stylesheet" type="text/css" href="http://localhost:8080/dev_tests/d3/examples/treemap/treemap-svg.css" />
<script type="text/javascript" src="http://localhost:8080/dev_tests/d3/d3.js"></script>
<script type="text/javascript" src="http://localhost:8080/dev_tests/d3/d3.layout.js"></script>
<script type="text/javascript" src="http://localhost:8080/dev_tests/latest.jquery/jquery-latest.js"></script>
</head>
<body>
<div id="chart">
<script type='text/javascript'>
var jdata = {
"children": [
{
"name": "quant_mechanics",
"size": "1243"
},
{
"name": "graph_theory",
"size": "4343"
},
{
"name": "algebra",
"size": "1936"
},
{
"name": "calc",
"size": "3936"
},
{
"name": "geom",
"size": "2136"
},
{
"name": "stats",
"size": "4136"
}
]
};
var w = 350,
h = 200,
color = d3.scale.category20c();
var treemap = d3.layout.treemap()
.padding(4)
.size([w, h])
.value(function(d) { return d.size; });
var svg = d3.select("#chart").append("svg")
.style("position", "relative")
.style("width", w + "px")
.style("height", h + "px");
redraw3();
function redraw3() {
var cell = svg.data([jdata]).selectAll("g")
.data(treemap)
.enter().append("g")
.attr("class", "cell")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
cell.append("rect")
.attr("width", function(d) { return d.dx; })
.attr("height", function(d) { return d.dy; })
.style("fill", function(d) { return d.children ? color(d.data.name) : null; });
cell.append("text")
.attr("x", function(d) { return d.dx/2; })
.attr("y", function(d) { return d.dy/2; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.children ? null : d.data.name; });
}
var interval = setInterval(function() {
$.getJSON("http://localhost:8080/dev_tests/d3/examples/data/flare2.json", function(json) {
alert(json.children);
jdata.push({value: json.children});
redraw3();
});
}, 30000);
</script>
</div>
</body>
</html>
読むに新しい
json.childrenオブジェクトをpushしたいと考えていtoString＃説明 –