首页 > 代码库 > d3js树状图tree
d3js树状图tree
使用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","pos":"l"