d3.js——绘制打包图

最新推荐文章于 2023-07-11 16:05:54 发布

AryaoO

最新推荐文章于 2023-07-11 16:05:54 发布

阅读量2.6k

点赞数

分类专栏：前端开发——D3 前端开发基础文章标签： d3.js d3.layout.pack 打包图数据转换 svg

本文链接：https://blog.csdn.net/Selina_Chan/article/details/51261117

版权

本文介绍如何利用d3.js库中的d3.layout.pack()方法进行数据转换，进而创建富有视觉吸引力的打包图。打包图通过一系列同心圆环展示数据层次结构，适合展现复杂的数据分布情况。

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

打包图其实就是通过d3.layout.pack()进行数据转换后，然后画圈圈咯~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打包图</title>
</head>
<body>
<script src="d3.js"></script>
<script src="js/pack.js"></script>
</body>
</html>

/**
 * Created by Silence_C on 2016/4/27.
 */
var width = 600,
    height = 600;

//定义数据转换函数
var pack = d3.layout.pack()
.size([width,height])
.radius(20);

var svg = d3.select("body").append("svg")
    .attr("width",width)
    .attr("height",height)

//取数据，绘图
d3.json("city2.json",function(error,root){
    var nodes = pack.nodes(root);
    var links = pack.links(nodes);

    console.log(nodes);
    console.log(links);

    //画圈圈
    svg.selectAll(