效果图

数据

{

"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库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定 ...

随机推荐

VMware 无法开机
无法打开磁盘虚拟机无法打开磁盘 "或者某一个快照所依赖的磁盘原因:未能锁定文件"的解决办法很多人在使用虚拟机是都会遇到“无法打开磁盘" x:\*\*vmdk &qu ...
分布式锁的几种实现方法：redis实现分布式锁
使用失效的方式实现分布式锁(推荐) import redis.clients.jedis.Jedis; /** * 使用redis实现分布式锁(推荐) * */ public class JedLoc ...
公司PL/SQL考核及小结
一.数据库初始化脚本 -- Create table 学生信息 drop table HAND_STUDENT; create table HAND_STUDENT ( STUDENT_NO ) no ...
ELK电子书籍
Elasticsearch in Action(英文版).pdfElasticsearch实战 in action(中文版).pdfElasticsearch技术解析与实战.pdfElasticsea ...
execjs执行js代码报错:Exception in thread Thread-1
最近在爬一个js数据加密的网站的时候,出了点问题,困扰了我两天直接运行js文件的时候正常,但是用execjs运行js代码的时候总是会报错最后翻了很多博客之后,终于找到了原因:原因是有一个程序在使用 ...
loj 6031「雅礼集训 2017 Day1」字符串
loj 注意到每次询问串长度都是给定的,并且询问串长\(k*\)询问次数\(q<10^5\),所以这里面一个东西大的时候另一个东西就小,那么考虑对较小的下功夫如果\(k\le \sqrt{n} ...
C#中实现Hash应用
在C#中,数据的Hash以MD5或SHA1的方式实现,MD5与SHA1都是Hash算法,MD5输出是128位的,SHA1输出是160位的,MD5比SHA1快,SHA1比MD5强度高. 1.1 SHA- ...
wampserver2.2 在window2003下的安装的主要问题
准备安装最新的wampserver 2.2c, 1.安装问题,安装完成后总是无法启动服务系统事件中提示错误找不到附属汇编 Microsoft.VC90.CRT,上一个错误是参照的汇编没有 ...
linux命令详解——vim
显示行号:命令模式下set nu 定位到指定行: 命令模式下,:n 比如想到第2行,:2 编辑模式下,ngg 比如想到第5行 5gg(或者5G) 打开文件定位到指定行 vim +n te ...
Delphi 处理异常情况

d3.js+svg的树形图

效果图

数据

HTML完整代码

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

随机推荐

热门专题

HTML完整代码　　