众所周知,这个插件使用的svg技术,而IE8(包括IE8)之前的浏览器是不支持svg的

接下来看代码吧

从后台获取到带id和父id的目录数据[json格式]

var module = requestUrl('/Home/ModuleList', null);
module = eval("(" + module + ")");

 再将json拼成需要的svg格式

//svg图数据
var treeData = null;
//如果左侧菜单目录不为空
if (module.total != 0) {
var json = "[";
//循环第一层
for (var i = 0; i < module.total; i++) {
//根节点
var root = module.rows[i].PARENTID;
//如果为第一层
if (module.rows[i].LEVEL == '1') {
json += "{";
json += "'name': '" + module.rows[i].MODULE + "(" + module.rows[i].MODULEID +")',";
json += "'parent':'信息管理系统(0)','value': 10,'children': [";
//当前的模块ID
var moduleId = module.rows[i].MODULEID;
var parentId = null;
for (var j = 0; j < module.total; j++) { //如果为第二层
if (module.rows[j].LEVEL == '2') {
//获取第二层父ID
parentId = module.rows[j].PARENTID;
var moduleId_children = module.rows[j].MODULEID;
//如果第二层父ID等于第一层模块ID
if (moduleId == parentId) {
json += "{";
json += "'name':'" + module.rows[j].MODULE + "(" + module.rows[j].MODULEID+")',";
json += "'parent': '" + module.rows[i].MODULE + "','value': 10,'children': ["; for (var k = 0; k < module.total; k++) {
if (module.rows[k].LEVEL == '3') {
parentId = null;
parentId = module.rows[k].PARENTID;
if (moduleId_children == parentId) {
json += "{";
json += "'name': '" + module.rows[k].MODULE + "(" + module.rows[k].MODULEID +")','value': 5";
json += "},";
}
}
}
json += "]},";
}
}
}
json += "]},";
}
} json += "]";
//svg数据[json]
treeData = [{
"name": "信息管理系统(0)",
"parent": "root",
"value": 10,
"children": eval("(" + json + ")")
}];

  接下来是绘制svg图的代码:

// ************** Generate the tree diagram  *****************
//定义树图的全局属性(宽高)
var margin = { top: 10, right: 120, bottom: 20, left: 400 },
width = 1200 - margin.right - margin.left,
height = 600 - 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 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 + ")"); root = treeData[0];//treeData为上边定义的节点属性
root.x0 = height / 2;
root.y0 = 0; update(root); d3.select(self.frameElement).style("height", "750px"); function update(source) { // Compute the new tree layout.计算新树图的布局
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes); // Normalize for fixed-depth.设置y坐标点,每层占180px
nodes.forEach(function (d) { d.y = d.depth * 180; }); // Update the nodes…每个node对应一个group
var node = svg.selectAll("g.node")
.data(nodes, function (d) { return d.id || (d.id = ++i); });//data():绑定一个数组到选择集上,数组的各项值分别与选择集的各元素绑定 // Enter any new nodes at the parent's previous position.新增节点数据集,设置位置
var nodeEnter = node.enter().append("g") //在 svg 中添加一个g,g是 svg 中的一个属性,是 group 的意思,它表示一组什么东西,如一组 lines , rects ,circles 其实坐标轴就是由这些东西构成的。
.attr("class", "node") //attr设置html属性,style设置css属性
.attr("transform", function (d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click); //添加连接点---此处设置的是圆圈过渡时候的效果(颜色)
// nodeEnter.append("circle")
// .attr("r", 1e-6);//d 代表数据,也就是与某元素绑定的数据。 nodeEnter.append("path")
.style("stroke-width", "2px")
.style("stroke", "#EB5409")
.style("fill", "white")
.attr("d", d3.svg.symbol()
.size(function (d) {
if
(d.value <= 9) { return "400"; } else if
(d.value >= 9) { return "400"; }
})
.type(function (d) {
if
(d.value <= 9) { return "triangle-up"; } else if
(d.value >= 9) { return "circle"; }
}))
.attr('class', function (d) {
if (d.value <= 9) {
return 'bling';
} else {
return 'fill_normal';
}
}); //添加标签
nodeEnter.append("text")
.attr("x", function (d) { return d.children || d._children ? -13 : 13; })
.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); // Transition nodes to their new position.将节点过渡到一个新的位置-----主要是针对节点过渡过程中的过渡效果
//node就是保留的数据集,为原来数据的图形添加过渡动画。首先是整个组的位置
var nodeUpdate = node.transition() //开始一个动画过渡
.duration(duration) //过渡延迟时间,此处主要设置的是圆圈节点随斜线的过渡延迟
.attr("r", 10)
.attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; });
//更新连接点的填充色
// nodeUpdate.select("circle")
// .attr("r", 10)
// .attr('class',function(d){
// if(d.value <= 9){
// return 'bling';
// }else{
// return 'fill_normal';
// }
// });
nodeUpdate.select("path")
.style("stroke-width", "2px")
.style("stroke", "#EB5409")
.style("fill", "white")
.attr("d", d3.svg.symbol()
.size(function (d) {
if
(d.value <= 9) { return "400"; } else if
(d.value >= 9) { return "400"; }
})
.type(function (d) {
if
(d.value <= 9) { return "triangle-up"; } else if
(d.value >= 9) { return "circle"; }
}))
.attr('class', function (d) {
if (d.value <= 9) {
return 'bling';
} else {
return 'fill_normal';
}
}); nodeUpdate.select("text")
.style("fill-opacity", 1); // Transition exiting nodes to the parent's new position.过渡现有的节点到父母的新位置。
//最后处理消失的数据,添加消失动画
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); // Update the links…线操作相关
//再处理连线集合
var link = svg.selectAll("path.link")
.data(links, function (d) { return d.target.id; }); // Enter any new links at the parent's previous position.
//添加新的连线
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function (d) {
var o = { x: source.x0, y: source.y0 };
return diagonal({ source: o, target: o }); //diagonal - 生成一个二维贝塞尔连接器, 用于节点连接图.
})
.style("stroke", function (d) {
//d包含当前的属性console.log(d)
return '#ccc';
}); // Transition links to their new position.将斜线过渡到新的位置
//保留的连线添加过渡动画
link.transition()
.duration(duration)
.attr("d", diagonal); // Transition exiting nodes to the parent's new position.过渡现有的斜线到父母的新位置。
//消失的连线添加过渡动画
link.exit().transition()
.duration(duration)
.attr("d", function (d) {
var o = { x: source.x, y: source.y };
return diagonal({ source: o, target: o });
})
.remove(); // Stash the old positions for transition.将旧的斜线过渡效果隐藏
nodes.forEach(function (d) {
d.x0 = d.x;
d.y0 = d.y;
}); } //定义一个将某节点折叠的函数
//Toggle children on click.切换子节点事件
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
} // 定义菜单选项
var userMenuData = [
[
{
text: "添加",
func: function () {
// id为节点id
var id = $(this).children("text").html();
id = id.substring(id.indexOf("(") + 1, id.indexOf(")"));
showDialog(id);
}
},
{
text: "修改",
func: function () {
var id = $(this).children("text").html();
id = id.substring(id.indexOf("(") + 1, id.indexOf(")"));
showEditDialog(id);
}
},
{
text: "禁用",
func: function () {
var id = $(this).children("text").html();
id = id.substring(id.indexOf("(") + 1, id.indexOf(")")); }
},
{
text: "删除",
func: function () {
var id = $(this).children("text").html();
id = id.substring(id.indexOf("(") + 1, id.indexOf(")"));
deleteAppModule(id);
}
}
]
];
// 事件监听方式添加事件绑定
$("g").smartMenu(userMenuData, {
name: "chatRightControl",
container: "g.node"
});

  效果如下图:

使用d3.v3插件绘制出svg图的更多相关文章

  1. D3.js (v3)+react框架 基础部分之认识选择集和如何绘制一个矢量图

    首先需要下载安装d3.js  :  yarn add d3 然后在组建中引入 :  import * as d3 from 'd3' 然后定义一个方法,在componentDidMount()这个钩子 ...

  2. 【D3.V3.js系列教程】--(十五)SVG基本图形绘制

    [D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...

  3. D3.js系列——布局:打包图和地图

    一.打包图 打包图( Pack ),用于表示包含与被包含的关系,也可表示各对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 1.布局(数据转换) var pack = d3.layout ...

  4. java+数据库+D3.js 实时查询人物关系图

    先看下 效果 某个用户,邀请了自己的朋友 ,自己的朋友邀请了其他朋友,1 展示邀请关系,2 点击头像显示邀请人和被邀请人的关系.(网上这种资料很少, 另外很多都是从JSON文件取 数据, 这里是从数据 ...

  5. D3.JS V4 绘制中国地图

    参考:http://bl.ocks.org/almccon/fe445f1d6b177fd0946800a48aa59c71 http://blog.csdn.net/lzhlzz/article/d ...

  6. 使用ABAP绘制可伸缩矢量图

    Jerry去年的文章 动手使用ABAP Channel开发一些小工具,提升日常工作效率 里曾经介绍过一些用ABAP实现的可供娱乐的小程序,比如用古老的HPGL接口在SAPGUI里绘图: 关于如何用SA ...

  7. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  8. Origin9.1如何绘制风向玫瑰图(Binned Data)?

    Origin9.1如何绘制风向玫瑰图(Binned Data)? 时间:2014/5/14 21:02:44 点击: 2624 核心提示:今天为大家介绍下如何使用Origin9.1绘制如下图所示的风向 ...

  9. Origin9.1如何使用原始数据(Raw Data)绘制风向玫瑰图

    核心提示:今天为大家简单介绍下如何使用原始数据绘制风向玫瑰图.本例以Origin 9.1进行演示.1.本例所用数据截图如下,列A为风向,列B为风速.2.选中两列数据,进入Plot下的Specializ ...

随机推荐

  1. Linux内核配置、编译及Makefile简述

    Hi,大家好!我是CrazyCatJack.最近在学习Linux内核的配置.编译及Makefile文件.今天总结一下学习成果,分享给大家^_^ 1.解压缩打补丁 首先是解压缩你获取到的Linux内核. ...

  2. Object.create 函数 (JavaScript)

    创建一个具有指定原型且可选择性地包含指定属性的对象. 语法 Object.create(prototype, descriptors) 参数 prototype 必需.  要用作原型的对象.  可以为 ...

  3. 在Android中使用并发来提高速度和性能

    Android框架提供了很实用的异步处理类.然而它们中的大多数在一个单一的后台线程中排队.当你需要多个线程时你是怎么做的? 众所周知,UI更新发生在UI线程(也称为主线程).在主线程中的任何操作都会阻 ...

  4. 创建高安全性PHP网站的几个实用要点

    大家都知道PHP已经是当前最流行的Web应用编程语言了.但是也与其他脚本语言一样,PHP也有几个很危险的安全漏洞.所以在这篇教学文章中,我们将大致看看几个实用的技巧来让你避免一些常见的PHP安全问题. ...

  5. qtcreator增加doxygen注释

    1,在以下网址找到和你的qt creator版本相对应的插件文件,还要注意系统版本 http://dev.kofee.org/projects/qtcreator-doxygen/files 2,根据 ...

  6. Java开发笔记(五十五)关键字static的用法

    前面介绍嵌套类的时候讲到了关键字static,用static修饰类,该类就变成了嵌套类.从嵌套类的用法可知,其它地方访问嵌套类之时,无需动态创建外层类的实例,直接创建嵌套类的实例就行.其实static ...

  7. AWD比赛常规套路

    作者:Leafer   本文属于Arctic shell原创内容计划文章,转载请注明原文地址! 比赛环境:纯净win10,最新版kali,securecrt或者WinSCP 在进入服务器后应进行的常规 ...

  8. 【Spring Boot &amp;&amp; Spring Cloud系列】那些Spring Boot中踩过的坑

    一.不连接数据库启动springboot报错 Cannot determine embedded database driver class for database type NONE 原因:Spr ...

  9. 符号三角形_hdu_2510(深搜).java

    http://acm.hdu.edu.cn/showproblem.php?pid=2510 Time Limit: 2000/1000 MS (Java/Others)    Memory Limi ...

  10. java的集合框架详解

    前言:数据结构对程序设计有着深远的影响,在面向过程的C语言中,数据库结构用struct来描述,而在面向对象的编程中,数据结构是用类来描述的,并且包含有对该数据结构操作的方法. 在Java语言中,Jav ...