效果图

数据

{

"name":"中国",

"children":

[

    {

      "name":"浙江" ,

      "children":

      [

            {"name":"杭州" },

            {"name":"宁波" },

            {"name":"温州" },

            {"name":"绍兴" }

      ]

    },  

    {

        "name":"广西" ,

        "children":

        [

            {

            "name":"桂林",

            "children":

            [

                {"name":"秀峰区"},

                {"name":"叠彩区"},

                {"name":"象山区"},

                {"name":"七星区",

                 "children":

             [

                {"name":"哈尔滨"},

                {"name":"齐齐哈尔"},

                {"name":"牡丹江"},

                {"name":"大庆"}

             ]

                }

            ]

            },

            {"name":"南宁"},

            {"name":"柳州"},

            {"name":"防城港"}

        ]

    },  

    {

        "name":"黑龙江",

        "children":

        [

            {"name":"哈尔滨"},

            {"name":"齐齐哈尔"},

            {"name":"牡丹江"},

            {"name":"大庆"}

        ]

    },  

    {

        "name":"新疆" ,

        "children":

        [

            {"name":"乌鲁木齐"},

            {"name":"克拉玛依"},

            {"name":"吐鲁番"},

            {"name":"哈密"}

        ]

    }

]

}

HTML完整代码　　

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>testD3-26-CollapsibleTree.html</title>

<script type="text/javascript" src="d3.js"></script>

<style>

.node circle {

  fill:yellow ;

  stroke: red;

  stroke-width: 1.5px;

}

.node {

  font: 10px sans-serif ;

}

.link {

  fill: none; //清空着色

  stroke: #ccc;

  stroke-width: 1.5px;

}

</style>

</head>

<body>

<script type="text/javascript">

        //位置参数

var margin = {top: 20, right: 120, bottom: 20, left: 120},

    width = 960 - margin.right - margin.left,

    height = 800 - margin.top - margin.bottom;

var i = 0,

    duration = 750,

    root;

// 声明树布局

var tree = d3.layout.tree()

    .size([height, width]);

// 指定为横向布局

var diagonal = d3.svg.diagonal()

    .projection(function(d) { return [d.y, d.x]; });

 var pathFunc;

 if (false) {

	pathFunc = diagonal;

} else {

	pathFunc = funLine;

}

var svg = d3.select("body").append("svg")

    .attr("width", width + margin.right + margin.left)

    .attr("height", height + margin.top + margin.bottom)

  .append("g")

    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("tree.json", function(error, flare) {

    // 根节点和位置

    root = flare;

    root.x0 = height / 2;

    root.y0 = 0;

    //(1) 折叠函数，递归调用,有子孙的就把children（显示）给_children（不显示）暂存，便于折叠，

    function collapse(d) {

        if (d.children) {  console.log(d);

            d._children = d.children;

            d._children.forEach(collapse);

            d.children = null;

        }

    }

    // 折叠根节点的每个孩子

    root.children.forEach(collapse);

    // 折叠之后要重绘

    update(root);

});

//(2) 更新布局

function update(source) {

  // (2-1) 计算新树的布局

  var nodes = tree.nodes(root).reverse(),

      links = tree.links(nodes);

  // (2-2) 树的深度这里树d.y。树的宽度最大720，要分四层，所以每层就乘180

  nodes.forEach(function(d) {

    d.y = d.depth * 180;// 树的x,y倒置了，所以这里Y其实是横向的

  });

  // (2-3) 数据连接，根据id绑定数据

  var node = svg.selectAll("g.node")

      .data(nodes, function(d) {

        return d.id //最初新点开的节点都没有id

        || (d.id = ++i); //为没有id的节点添加上ID

      });

  // (2-4) 点击时增加新的子节点

  var nodeEnter = node.enter().append("g")

      .attr("class", "node")

      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })

	  .style("cursor","pointer")

      .on("click", click);

  nodeEnter.append("circle")

      .attr("r", 1e-6)

      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  nodeEnter.append("text")

      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })

      .attr("dy", ".35em")

      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })

      .text(function(d) { return d.name; })

      .style("fill-opacity", 1e-6);

  // (2-5) 原有节点更新到新位置

  var nodeUpdate = node.transition()

      .duration(duration)

      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

  nodeUpdate.select("circle")

      .attr("r", 4.5)

      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  nodeUpdate.select("text")

      .style("fill-opacity", 1);

  // (2-6) 折叠节点的子节点收缩回来

  var nodeExit = node.exit().transition()

      .duration(duration)

      .attr("transform", function(d) {

        return "translate(" + source.y + "," + source.x + ")";

       })

      .remove();

  nodeExit.select("circle")

      .attr("r", 1e-6);

  nodeExit.select("text")

      .style("fill-opacity", 1e-6);

  // (2-7) 数据连接，根据目标节点的id绑定数据

  var link = svg.selectAll("path.link")

      .data(links, function(d) { return d.target.id; });

  // (2-8) 增加新连接

  link.enter().insert("path", "g")

      .attr("class", "link")

      .attr("d", function(d) {

        var o = {x: source.x0, y: source.y0};

        return funLine({source: o, target: o});

      });

  // (2-9) 原有连接更新位置

  link.transition()

      .duration(duration)

      .attr("d", funLine);

  // (2-10) 折叠的链接，收缩到源节点处

  link.exit().transition()

      .duration(duration)

      .attr("d", function(d) {

        var o = {x: source.x, y: source.y};

        return funLine({source: o, target: o});

      })

      .remove();

  // 把旧位置存下来，用以过渡

  nodes.forEach(function(d) {

    d.x0 = d.x;

    d.y0 = d.y;

  });

}

// (3) 切换折叠与否

function click(d) {

  if (d.children) {

    d._children = d.children;

    d.children = null;

  } else {

    d.children = d._children;

    d._children = null;

  }

  update(d);// 重新渲染

}

var funLine = function(obj) {  //折线

	var s = obj.source;

	var t = obj.target;

	return "M"+s.y+","+s.x+"L"+(s.y+(t.y-s.y)/2)+","+s.x+"L"+(s.y+(t.y-s.y)/2)+","+t.x+"L"+t.y+","+t.x;

}

</script>

</body>

</html>

d3.json 那行可以改为：

var data =' {"name":"中国","children":[{"name":"江苏"},{"name":"贵州"},{"name":"上海"}]}';
root = JSON.parse(data);

d3.js+svg的树形图的更多相关文章

d3.js svg中 g 标签问题一览
svg 中的g标签, 算是比较特殊 1 没有x y属性 2 没有width height 属性 3 不能fill 4 .... g标签基本只管分组问题, 其他功能一概不提供要解决这些问题, 直接在g ...
D3.js & Data Visualization & SVG
D3.js & Data Visualization & SVG https://davidwalsh.name/learning-d3 // import {scaleLinear} ...
SVG基础图形和D3.js
使用D3.js画一个SVG 的圆 circle 可以使用如下代码创建: <svg width="50" height="50"> <circ ...
D3.js学习笔记（六）——SVG基础图形和D3.js
目标在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的圆 circ ...
D3.js学习笔记（四）—— 使用SVG坐标空间
目标在这一章,你将要使用D3.js基于一些数据把SVG元素添加到你想要的坐标位置上. 我们的目标就是使用下面的数据集: var spaceCircles = [30,70,110]; 并使用D3.j ...
D3.js学习笔记（三）——创建基于数据的SVG元素
目标在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...
D3.js学习（七）
上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...
D3.js学习（一）
从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...
d3.js读书笔记-1
d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定 ...

随机推荐

JDK安装及JAVA环境变量配置（JDK1.8版本）
一:JDK官网下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk12-downloads-5295953.html JD ...
python-socketserver实例
import socketserver class MyTCPHandler(socketserver.BaseRequestHandler): def handle(self): while Tru ...
网站更换服务器出现加载不了js css文件的问题
原因是里面加找不到.woff类型,后面把上面注释掉就可以了
三、redis学习(jedis连接池)
一.jedis连接池二.jedis连接池+config配置文件三.jedis连接池+config配置文件+util工具类 util类 public class JedisPoolUtils { / ...
new angular 项目的工作区配置文件和应用源文件
1.工作区配置文件每个工作空间中的所有项目共享同一个 CLI 配置环境 .该工作空间的顶层包含着全工作空间级的配置文件.根应用的配置文件以及一些包含根应用的源文件和测试文件的子文件夹. 工作空间配置 ...
centos7 部署haproxy
第一章 :haproxy介绍 1.1 简介 HAProxy 是一款提供高可用性.负载均衡以及基于TCP(第四层)和HTTP(第七层)应用的代理软件,支持虚拟主机,它是免费.快速并且可靠的一种解决方案. ...
nginx服务学习第二章
nginx.config文件中字符串不显示高亮 nginx服务搭建完成后,查看nginx.config的时候发现没有高亮字符,要想配置文件出现高亮方便观看,需要修改一些配置文件,修改步骤如下: # m ...
linux的一些运维操作基本知识
1 ~/.bashrc 这个可以认为是linux系统的启动项,每次启动的时候都会运行一些这里边的命令: 常见的有: alias rm='rm -i'//修改某些指令: export LD_LIBRAR ...
php+ajax远程加载避免重复提交
近日在练习签到送积分功能时,发现可以在一瞬间的时候提交好多次导致可以重复领取多次积分除了增加请求限制之外发现ajax提交没有限制重复提交遂立此贴为警示首先上表单代码 <form ons ...
常见shell用法
分析nginx访问日志 awk '{a[b[$1]++]}END{for(i=length(a);i>0;i--)for(j in b)if(b[j]==i){c++;if(c<=10)p ...

d3.js+svg的树形图

效果图

数据

HTML完整代码

d3.js+svg的树形图的更多相关文章

随机推荐

热门专题

HTML完整代码　　