最近的工作与可视化有关,有展示血缘关系树的需求 ,类似于这样:

碰巧搜到 D3(用于可视化的js库,作者吕之华),瞬间无法自拔,它的树状图功能基于SVG、js ,暴露的可操作入口也简洁恰当,能帮助你快速完成svg开发。

D3的使用:  入门教程:http://wiki.jikexueyuan.com/project/d3wiki/author.html

开发笔记:

1. SVG DOM 与HTML DOM 不一样,属性、样式是不共用的,但也有相似之处

2. Svg中一段文本用<text>标签,如果要集中控制多个元素用<g>(group)标签

3. 钩子:

nodeEnter  nodeUpdate  nodeExit
var flare = {
"name": "前端应用",
"children": [
{
"name": "服务1",
"children": [
{
"name": "cluster",
"children": [
{"name": "AgglomerativeCluster", "size": 3938}
]
},
{
"name": "graph",
"tablename" : "public.conf_hanzhi_pinyin",
"dataowner" :"hippopMan",
"datadeveloper":"hippopMan",
"url":"/biReport/report/aabbcc.html",
"children": [
{"name": "BetweennessCentrality", "size": 3534},
{"name": "LinkDistance", "size": 5731}
]
},
{
"name": "optimization",
"children": [
{"name": "AspectRatioBanker", "size": 7074}
]
}
]
},
{
"name": "服务2",
"children": [
{"name": "Easing", "size": 17010},
{"name": "FunctionSequence", "size": 5842}
]
}
          ........
]
};

  

具体代码:

var margin = {top: 20, right: 120, bottom: 20, left: 120},
width = 3200 - margin.right - margin.left,
height = 1200 - 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(".canvan").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + 80 + "," + 20 + ")"); function collapse(d) { if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.openFlag = false; //自定义属性
}else{
if(searchFlag){
d.openFlag = false;
}else{
if(reportKey){
d.openFlag = true;
} } }
} function update(source) { // Compute the new tree layout转换数据
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes); // Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 240; }); // Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); }); // Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }); //css3属性 二维动画 var htm = "<div class='infoBox'>123</div>";
//写文字的变迁
nodeEnter.append("circle") //画圆
.attr("x","0px")
.attr("y", "10px") //x,y代表坐标,注意在group元素中,坐标是指在该元素中的相对坐标
.attr("cx","0px")
.attr("cy", "0px")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.style("fill-opacity", 1) //透明度 显示隐藏用display(none,block)
.style("fill", function (d) { //填充颜色
return d.openFlag ? "#fff":"#12a566"
})
.on("click", click) //给元素添加事件
.on("mouseover",hover); nodeEnter.append("text") //text标签
.attr("class", "tablename")
.attr("x","0px")
.attr("y", "15px")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.attr("width","60")
.attr("height","45")
.text(function(d) { return "表名" + d.tablename; }) //文字
.style("display",showTableName?"block":"none")
.style("fill-opacity", 1e-6);
......
// Transition nodes to their new position.
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.openFlag ? "#fff":"#12a566" }); 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});
}); // 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.childHasShowed){//已经加载出child
//收起 d.children 展开 d._children;
if (d.children) {
d._children = d.children;
d.children = null;
d.openFlag = false;
} else {
d.children = d._children;
d._children = null;
d.openFlag = true;
}
update(d);
}else{ //点击加载child
getDepenInfo(d.tablename, true, true ,d);
// d.children = obj.children;
// update(d);
}
} function hover(d) {
console.log("over")
}

SVG--D3--血缘关系树的更多相关文章

  1. 用D3.js画树状图

    做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...

  2. 基于spark logicplan的表血缘关系解析实现

    随着公司平台用户数量与表数量的不断增多,各种表之间的数据流向也变得更加复杂,特别是某个任务中会对源表读取并进行一系列复杂的变换后又生成新的数据表,因此需要一套表血缘关系解析机制能清晰地解析出每个任务所 ...

  3. svg + d3

    为了实现元素的添加,删除,拖拽,左键点击,右键单击,悬浮等功能,使用了d3 + svg 的技术来实现界面. 最开始是采用canvas,但是由于功能原因放弃了该技术,可以看下 canvas简介 另附:c ...

  4. d3生成的树状图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 基于MaxCompute InformationSchema进行血缘关系分析

    一.需求场景分析 在实际的数据平台运营管理过程中,数据表的规模往往随着更多业务数据的接入以及数据应用的建设而逐渐增长到非常大的规模,数据管理人员往往希望能够利用元数据的分析来更好地掌握不同数据表的血缘 ...

  6. 一款好用的数据血缘关系在线工具--SQLFlow

      l  数据血缘关系(data lineage) 数据血缘属于数据治理中的一个概念,是在数据溯源的过程中找到相关数据之间的联系,它是一个逻辑概念.数据治理中经常提到血缘分析,血缘分析是保证数据融合的 ...

  7. 血缘关系分析工具SQLFLOW--实践指南

    SQLFlow 是用于追溯数据血缘关系的工具,它自诞生以来以帮助成千上万的工程师即用户解决了困扰许久的数据血缘梳理工作. 数据库中视图(View)的数据来自表(Table)或其他视图,视图中字段(Co ...

  8. 使用grabit分析mysql数据库中的数据血缘关系

    使用grabit分析mysql数据库中的数据血缘关系 Grabit 是一个辅助工具,用于从数据库.GitHub 等修订系统.bitbucket 和文件系统等各种来源收集 SQL 脚本和存储过程,然后将 ...

  9. d3实现家族树

      1.  jQuery和CSS3支持移动手机的DOM元素移动和缩放插件:panzoom   2.拖动:jqueryUI-Draggable.touchpunch   3.图表:echart.heig ...

随机推荐

  1. Linux批量查找与替换

    Linux批量查找并替换文件夹下所有文件的内容 经常要使用到 Linux的批量查找与替换,这里为大家介绍使用 sed 命令和 grep 命令的结合来实现查找文件中的内容并替换. 语法格式: sed - ...

  2. .net 手动建DataTable 获取DataTable列名 修改DataTable 列的顺序

    //创建 表 DataTable tables = new DataTable(); //添加 创建 列 //第一列 DataColumn cums = new DataColumn(); cums. ...

  3. 【最短路】CF 938D Buy a Ticket

    题目大意 流行乐队"Flayer"将在\(n\)个城市开演唱会,这\(n\)个城市的人都想去听演唱会,每个城市的票价不同,于是这些人就想是否能去其他城市听演唱会更便宜,但是去其他的 ...

  4. 机器分配----线性dp难题(对于我来说)

    题目: 总公司拥有高效设备M台, 准备分给下属的N个分公司.各分公司若获得这些设备,可以为国家提供一定的盈利.问:如何分配这M台设备才能使国家得到的盈利最大?求出最大盈利值.其中M <= 15, ...

  5. 数据查询语句:DQL(Data Query Language)

    一.基础查询 1.语法:select 查询列表 from 表名; 2.特点:1.通过select查询完的结果,是一个虚拟的表格,不是真实存在   2.查询列表可以是:字段.表达式.常量.函数等   3 ...

  6. pycharm2018.3.5 下载激活(windows平台)

    软件下载: 百度网盘下载 提取码: 73p7 激活操作: 1.下载jar包 JetbrainsCrack-4.2-release-enc.jar 链接:https://pan.baidu.com/s/ ...

  7. PowerShell 定时输出citrix desktop昨日连接会话

    asnp citrix*$now_date = [datetime]::Today$day2 = [datetime]::Today - [TimeSpan]::FromHours(24)$fiel_ ...

  8. 立即执行函数 - Js函数笔记

    立即执行函数 定义:此类函数没有声明,在执行一次后即释放,适合做初始化. 针对初始化功能的函数,同时遵循一句话,只有表达式才能被执行符号执行 1.(function() {...}()); - W3C ...

  9. 使用Pytorch搭建模型

    本来是只用Tenorflow的,但是因为TF有些Numpy特性并不支持,比如对数组使用列表进行切片,所以只能转战Pytorch了(pytorch是支持的).还好Pytorch比较容易上手,几乎完美复制 ...

  10. Linux系统Yum仓库制作

    在使用Linux系统的时候,通常需要安装许多软件,Linux系统通常安装软件有源码包安装(文件格式:.tar.gz 或.tar.bz2:安装过程:解压.环境检查.编译和安装).Rpm包安装(文件格式: ...