d3js树状图tree - 爱码网

使用ds.js画出树状图，样式可自定义。以下是效果图

d3js树状图tree

介绍下过程：

使用d3.js
初始化d3和画布大小，tree = d3.layout.cluster().size([h, w])
导入数据，使用d3默认处理数据： root = tree.nodes(data)
处理数据（包括坐标的处理）
展示数据

html代码如下，需要引用d3.js即可

<html>
<head>
	<title></title>
</head>
<body>
<js href="/Public/plugins/d3js/d3.min.js" />
<style type="text/css">
#body{
	height: 500px;
	width: 500px;
}
/*d3js*/
.node circle {
	cursor: pointer;
	fill: #fff;
	stroke: steelblue;
	stroke-width: 1.5px;
}

.node text {
	font-size: 11px;
	cursor: pointer;
}

path.link {
	fill: none;
	stroke: #ccc;
	stroke-width: 1.5px;
}

</style>

<div id="body" class="body">
	<div id="footer">
		<button onclick="updateinfo()">Click me</button>
	</div>
</div>

<script type="text/javascript">



updateinfo();

function updateinfo(){
	var json ={"r":{"name":"flare","children":[{"name":"animate","children":[{"name":"Easing"},{"name":"FunctionSequence"},{"name":"ISchedulable"},{"name":"Parallel"},{"name":"Parallel2"},{"name":"Parallel4"},{"name":"Parallel6"},{"name":"Pause"}]}]},"l":{"name":"flare","children":[{"name":"query","children":[{"name":"AggregateExpression","pos":"l"},{"name":"And","pos":"l"},{"name":"Arithmetic","pos":"l"},{"name":"fasdfasdf",