使用ds.js画出树状图，样式可自定义。以下是效果图
介绍下过程：
- 使用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"