d3.js 如何将节点动态添加到树 #2答案

【问题标题】：d3.js how to dynamically add nodes to a tree #2d3.js 如何将节点动态添加到树 #2
【发布时间】：2013-06-07 10:05:54
【问题描述】：

<?php
//Zoomable Partition Layout
//http://mbostock.github.io/d3/talk/20111018/partition.html
echo $data
?>

<div id="partition">
<script type="text/javascript">


var w = 690,
h = 700,
x = d3.scale.linear().range([0, w]),
y = d3.scale.linear().range([0, h]);

var vis = d3.select("#partition").append("div")
.attr("class", "chart")
.style("width", w + "px")
.style("height", h + "px")
.append("svg:svg")
.attr("width", w)
.attr("height", h);

var partition = d3.layout.partition()
.value(function(d) { return d.size; });

d3.json("flare.json" , function(root) {

var g = vis.selectAll("g")
  .data(partition.nodes(root))
.enter().append("svg:g")
  .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; })
  .on("click", click);

var kx = w / root.dx,
  ky = h / 1

我不想使用 "d3.json("flare.json" , function(root) {" 因为我使用 jQuery 获取数据并将其保存在 $data 中。因此，我想使用“json = JSON.parse('');”而不是 d3.json但我不知道它是如何工作的。有人可以帮我吗？

【问题讨论】：

PHP 是一种服务器端语言。 PHP 标记被转换为输出并生成一个 html 页面。所以<?php echo $data ?> 必须替换为 JSON。在查看之前通过 Apache/PHP 渲染它。

标签： javascript dom svg d3.js

【解决方案1】：

<script type="text/javascript">
var jdata='${jsonvalue}' //json value 
d3.json("source dummy.json", function(json) {  // dummy.json for function call but processing json of jdata
root = JSON.parse(jdata);
root.x0 = h / 2;
root.y0 = 0; 
function toggleAll(d) {
if (d.children){
d.children.forEach(toggleAll);
toggle(d);
}}
// Initialize the display to show a few nodes.
root.children.forEach(toggleAll);
update(root);
});
</script>
Normally in D3 d3.json(function) must read the data from flare.json.For this case dymanically load the json [jdata] and processing the data for visualization

【讨论】：