效果图

数据

{

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

随机推荐

Java Web开发技术教程入门-Model1和Model2
今天我们聊聊JSP开发中的Model1和Model2. Model1采用了JSP+JavaBean技术开发Web应用.其中,JSP实现页面显示,业务逻辑和流程控制,数据处理由JavaBean完成.在J ...
Codeforces 1221B. Knights
传送门看到棋盘上跳马,发现如果把棋盘黑白染色,那么每次移动都是从白点到黑点,从黑点到白点所以直接根据黑白染色判断每个位置的马的颜色即可 #include<iostream> #incl ...
简单 UDP 操作类
using System; using System.Collections.Generic; using System.Text; using System.Net; using System.Ne ...
O013、动手实践Linux VLAN
参考https://www.cnblogs.com/CloudMan6/p/5326737.html 本节我们来看如何在实验环境中实施和部署如下的VLAN 网络
104、验证Swarm数据持久性（Swarm11）
参考https://www.cnblogs.com/CloudMan6/p/8016994.html 上一节我们成功将 nfs 的volume挂载到 Service上,本节验证 Failover时 ...
Hybrid APP架构设计
通讯作为一种跨语言开发模式,通讯层是Hybrid架构首先应该考虑和设计的,往后所有的逻辑都是基于通讯层展开. Native(以Android为例)和H5通讯,基本原理: Android调用H5:通过 ...
Ubuntu安装配置Tensorflow-GPU
Ubuntu 16.04 + GTX 1080 Ti + CUDA 9.0 + Cudnn 7.1 安装配置 1. 安装显卡驱动首先查看一下自己的电脑需要怎样的驱动,我们可以先到 http://ww ...
从一道索引数据结构面试题看B树、B+树
题目1: Mysql数据库用过吧?l里面的索引是基于什么数据结构. 答:主要是基于Hash表和B+树题目2: 很好请你说一下B+树的实现细节是什么样的?B-树和B+树有什么区别?联合索引在B+树中如 ...
QT5.9 QString和字符串转换的乱码问题
QString转字符串的乱码: 先在头文件加入: //解决QString到char的中文乱码 #if _MSC_VER >= 1600 #pragma execution_character_s ...
vs2017新建一个空项目
我们会发现VS2017的控制台程序创建之后会有一些头文件这和之前的VS的版本不一样之前的都可以选择空项目来避免,下面我们就来介绍方法: 首先我们不要创建新的控制台项目,而是创建桌面向导: 然后我们就可 ...

d3.js+svg的树形图

效果图

数据

HTML完整代码

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

随机推荐

热门专题

HTML完整代码　　