d3.js——树状图的绘制

最新推荐文章于 2024-02-18 09:59:44 发布

AryaoO

最新推荐文章于 2024-02-18 09:59:44 发布

阅读量2.9w

点赞数 4

分类专栏：前端开发——D3 前端开发基础文章标签： d3.js layout.tree layout.cluster 树状图

本文链接：https://blog.csdn.net/selina_chan/article/details/51260516

版权

前端开发基础同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

前端开发——D3

33 篇文章 4 订阅

订阅专栏

树状图和集群图其实差不多，就一点点不一样，见下图：

图（1）：集群图——d3.layout.cluster()

图（2）：树状图——d3.layout.tree()

这样一来差别就看出来了。由于两者的代码差不多，这里就直接附上树状图源码，不多加解释咯~

city.json文件：

{
  "name":"中国",
  "children":
  [
    {
      "name":"浙江" ,
      "children":
      [
        {"name":"杭州" },
        {"name":"宁波" },
        {"name":"温州" },
        {"name":"绍兴" }
      ]
    },

    {
      "name":"广西" ,
      "children":
      [
        {
          "name":"桂林",
          "children":
          [
            {"name":"秀峰区"},
            {"name":"叠彩区"},
            {"name":"象山区"},
            {"name":"七星区"}
          ]
        },
        {"name":"南宁"},
        {"name":"柳州"},
        {"name":"防城港"}
      ]
    },

    {
      "name":"黑龙江",
      "children":
      [
        {"name":"哈尔滨"},
        {"name":"齐齐哈尔"},
        {"name":"牡丹江"},
        {"name":"大庆"}
      ]
    },

    {
      "name":"新疆" ,
      "children":
      [
        {"name":"乌鲁木齐"},
        {"name":"克拉玛依"},
        {"name":"吐鲁番"},
        {"name":"哈密"}
      ]
    }
  ]
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树状图</title>
</head>
<style>
    .node circle{
        fill:#fff;
        stroke:steelblue;
        stroke-width: 1.5px;
    }
    .node{
        font: 12px sans-serif;
    }
    .link{
        fill:none;
        stroke:#ccc;
        stroke-width: 1.5px;
    }
</style>
<body>
<script src="d3.js"></script>
<script src="js/tree.js"></script>
</body>
</html>

var width = 500,
    height = 500;

//定义数据转换函数
var tree = d3.layout.tree()
    .size([width,height-200])
//定义对角线生成器diagonal
var diagonal = d3.svg.diagonal()
    .projection(function(d){return [d.y, d.x]})

//定义svg
var svg = d3.select("body").append("svg")
    .attr("width",width)
    .attr("height",height)
    .append("g")
    .attr("transform","translate(40,0)")

//读取json文件，进行绘图
d3.json("city.json",function(erro,root){
    var nodes = tree.nodes(root);
    var links = tree.links(nodes);

    //画点
    var node = svg.selectAll(".node")
        .data(nodes)
        .enter()
        .append("g")
        .attr("class","node")
        .attr("transform",function(d){return "translate("+ d.y+","+ d.x+")"})
    //加圈圈
    node.append("circle")
        .attr("r",4.5)
    //加文字
    node.append("text")
        .attr("dx",function(d){return d.children?-8:8;})
        .attr("dy",3)
        .style("text-anchor", function (d) {return d.children?"end":"start"})
        .text(function (d) {return d.name})

    //画线
    var line = svg.selectAll("link")
        .data(links)
        .enter()
        .append("path")
        .attr("class","link")
        .attr("d",diagonal)


})

AryaoO

关注

4
点赞
踩
19

收藏

觉得还不错? 一键收藏
11
评论
d3.js——树状图的绘制

树状图和集群图其实差不多，就一点点不一样，见下图：图（1）：集群图——d3.layout.cluster()图（2）：树状图——d3.layout.tree()这样一来差别就看出来了。由于两者的代码差不多，这里就直接附上树状图源码，不多加解释咯~city.json文件：{ "name":"中国", "children": [
复制链接

扫一扫