Question

我正在运行Firefox中的代码，我正在获得所需的布局，但我在实现节点扩展和节点崩溃时陷入困境。

任何人都可以帮我解决我的问题，以实现节点扩展和节点崩溃。

使用的代码是 -

＆＃13;

// json file

{
 "name": "Max",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "HierarchicalCluster", "size": 6714},
      {"name": "MergeEdge", "size": 743}
     ]
    },
    {
     "name": "graph",
     "children": [
      {"name": "BetweennessCentrality", "size": 3534},
      {"name": "LinkDistance", "size": 5731},
      {"name": "MaxFlowMinCut", "size": 7840},
      {"name": "ShortestPaths", "size": 5914},
      {"name": "SpanningTree", "size": 3416}
     ]
   }
   ]
 }
 ]
}

＆＃13;

<!DOCTYPE html>
<meta charset="utf-8">

<head>

	<title>d3 tree</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>

</head>
<body>

<script>
	
	
	var canvas = d3.select("body").append("svg")
	.attr("width", 5000)
	.attr("height", 500)
	.append("g")
 		.attr("transform", "translate(50, 50)");


	var tree = d3.layout.tree()
		.size([400, 400]);


 	d3.json("data.json", function (data) { 

 		var nodes = tree.nodes(data);
 		var links = tree.links(nodes);

 		var node = canvas.selectAll(".node")
 			.data(nodes)
 			.enter()
 			.append("g")
 				.attr("class", "node")
 				.attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; } )

 		node.append("circle")
 			.attr("r", 5)
 			.attr("fill", "steelblue");

 		node.append("text")
 			.text(function (d) { return d.name; })

 		var diagonal = d3.svg.diagonal()
 			.projection( function(d) { return[d.y, d.x];	});

 		canvas.selectAll(".link")
 			.data(links)
 			.enter()
 			.append("path")
 			.attr("class", "link")
 			.attr("fill", "none")
 			.attr("stroke", "#ADADAD")
 			.attr("d", diagonal);

 	})

 	

</script>

</body>

＆＃13;

如何在D3树结构中实现展开和折叠节点

0 个答案: