Sequences sunburst服务器请求实例

最新推荐文章于 2020-07-22 16:31:17 发布

yanxi1217

最新推荐文章于 2020-07-22 16:31:17 发布

阅读量425

点赞数

分类专栏：数据可视化文章标签： d3 服务器

本文链接：https://blog.csdn.net/yanxi1217/article/details/79209218

版权

本文介绍如何利用d3库创建Sequences Sunburst图表，通过下载d3.v4.min.js并参考相关文章，实现服务器请求。示例包括sunburst_show.jsp、sequences.css及DataShowController.java等文件，配合user_path_analyse_all.csv数据样例，展示最终的视觉效果。

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

yanxi1217

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Sequences sunburst服务器请求实例

Sequences sunburst的一个实例需要去官网下载d3.v4.min.js参照文章http://blog.csdn.net/wan353694124/article/details/78814104sunburst_show.jsphtml>head> meta charset="utf-8"> title>Sequences sunburst h
复制链接

扫一扫