Sequences sunburst的一个实例
需要去官网下载d3.v4.min.js
参照文章http://blog.csdn.net/wan353694124/article/details/78814104
sunburst_show.jsp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sequences sunburst home</title>
<script src="/datashow/d3/js/d3.v4.min.js"></script>
<link rel="stylesheet" type="text/css" href="/datashow/d3/css/sequences.css"/>
<!-- 下面的css可以不必有,这是为了优化我的页面 -->
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/bootstrap/css/font-awesome/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div id="main">
<!-- 定义左上角页面访问序列的容器 -->
<div class="form-group">
<label class="control-label col-lg-12">
<button id="all" class="btn btn-default" type="button">全部路径</button>
<button id="home" class="btn btn-info" type="button"><i class=" icon-eye-open"></i>首页路径</button>
<button id="new_user" class="btn btn-default " type="button">新用户路径</button>
</label>
</div>
<div id="sequence"></div>
<!-- 定义光芒图的容器 -->
<div id="chart">
<div>
<h4>首页路径分割数据策略</h4>
<ul>
<li>以首页为起点,之前的路径去掉</li>
<li>有连续多个首页的合并为一个</li>
<li>截取步长大于15步的路径</li>
</ul>
</div>
<div id="">
<!-- 定义鼠标悬停时,解释说明文字所在的容器 ,默认隐藏-->
<div id="explanation" style="visibility: hidden;">
<span id="percentage"></span><br/>
首页路径转化图
</div>
</div>
</div>
</div>
<!--定义图例所在容器 .以及切换是否显示的按钮-->
<div id="sidebar">
<input type="checkbox" id="togglelegend">显示颜色卡<br/>
<div id="legend" style="visibility: hidden;"></div>
</div>
<script type="text/javascript" src="/bootstrap/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
/*d3.select(self.frameElement).style("height", "700px");*/
// Dimensions of sunburst.
var width = 1300;
var height = 600;
var radius = Math.min(width, height) / 1.4;
// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
var b = {
w: 120, h: 30, s: 3, t: 3
};
// Mapping of step names to colors.
var colors;
//ajax 向服务器端请求颜色对照块(如果你的颜色块较少的可以直接写死在这)
$(document).ready(
$.get("/datashow/queryQtypeName.do", function (msg) {
colors = msg;
})
)
// Total size of all segments; we set this later, after loading the data.
var totalSize = 0;
var vis = d3.select("#chart").append("svg:sv