使用d3画横向组织架构图，兼容ie8（一）

在新单位上班半个月了，干的活都是小儿科的活，今天部门经理给了个图，让我写个组件来实现，图是一个横向的组织架构图。
好久之前就想写个组件来实现的，但由于一直感觉价值不大就没有动手。

网上搜索了下说是用d3来实现，一顿忙活后，发现大工告成：

代码如下：

 <!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style>.node {font: 12px sans-serif;}.textDiv{position: absolute;}.link {fill: none;stroke: #ccc;stroke-width: 1.5px;}</style>
</head>
<body>
<script type="text/javascript" src="d3.js" ></script>
<script type="text/javascript" src="jquery.js" ></script>
<!--[if lte IE 8]><script src="r2d3.js" charset="utf-8"></script><![endif]-->
<div id="test">2222222222</div>
<script>var width = 700,height =720;var cluster = d3.layout.tree().size([width, height - 290]);var diagonal = d3.svg.diagonal().projection(function(d) {return [d.y, d.x];});var svg = d3.select("body").append("svg").attr("width", width).attr("height", height).append("g").attr("transform", "translate(40,0)");var marginTop=19;d3.json("data.json", function(error, root) {var nodes = cluster.nodes(root);var links = cluster.links(nodes);var link = svg.selectAll(".link").data(links).enter().append("path").attr("class", "link").attr("d", function(d){return "M"+d.source.y+" "+d.source.x+"L"+(d.source.y+125)+" "+(d.source.x+5)+" L"+(d.source.y+125)+" "+(d.target.x+5)+" L"+d.target.y+" "+(d.target.x+5);}).attr("style",function(){return "stroke:#F7881F"});var node = svg.selectAll(".node").data(nodes).enter().append("g").attr("class", "node").attr("transform", function(d) {return "translate(" +( d.y-15) + "," + (d.x+ -10) + ")";})node.append("rect").attr("width",120).attr("height",30).attr("x",0).attr("y",0).attr("style","fill:#35AD5B;");node.append("text").attr("dx", function(d) {return 30;}).attr("dy", marginTop).style("text-anchor", function(d) {return "middle";}).style("fill","#fff").text(function(d) { return d.name; });node.append("text").attr("dx", function(d) {return 80;}).attr("dy", marginTop).style("text-anchor", function(d) {return "middle";}).style("fill","#fff").text(function(d) { return d.number; });});var getElementPosition = function(el){var ua = navigator.userAgent.toLowerCase();var isOpera = (ua.indexOf('opera') != -1);var isIE = (ua.indexOf('msie') != -1 && !isOpera);// not opera spoofif(el.parentNode === null || el.style.display == 'none'){return false;}var parent = null;var pos = [];var box;if(el.getBoundingClientRect){//IEbox = el.getBoundingClientRect();var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);return {x:box.left + scrollLeft, y:box.top + scrollTop};}else if(document.getBoxObjectFor){ // geckobox = document.getBoxObjectFor(el);var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;pos = [box.x - borderLeft, box.y - borderTop];}else{// safari & operapos = [el.offsetLeft, el.offsetTop];parent = el.offsetParent;if (parent != el) {while (parent) {pos[0] += parent.offsetLeft;pos[1] += parent.offsetTop;parent = parent.offsetParent;}}if (ua.indexOf('opera') != -1|| ( ua.indexOf('safari') != -1 && el.style.position == 'absolute')){pos[0] -= document.body.offsetLeft;pos[1] -= document.body.offsetTop;}}if (el.parentNode){parent = el.parentNode;}else{parent = null;}while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML'){ // account for any scrolled ancestorspos[0] -= parent.scrollLeft;         pos[1] -= parent.scrollTop;if (parent.parentNode) {parent = parent.parentNode;}else {parent = null;}}return {x:pos[0], y:pos[1]};}</script></body>
</html>

以为可以交差了，也没难度嘛，但知道部门经理说必须支持ie8，哭都来不急哦。网上度娘一番，度娘说可以通过r2d3.js来解决ie8的兼容，又松了空气，一顿忙活，在js引入的地方加入：

<!--[if lte IE 8]><script src="r2d3.js" charset="utf-8"></script><![endif]-->

效果如下：

真是坑爹啊，这叫兼容啊，线条颜色没了，字也没咯，线条加粗也没咯，怎么拿出来见人啊。
本打算去修改r2d3.js来实现功能，发现不现实。1w多行代码，而且写的一个字评价就是乱。

最后只能放弃r2d3.js了，自己写个组件来兼容ie8了，思路还是比较简单的就是判断如果是ie8浏览器采用vml来画图，如果是其他浏览器或者ie9或者ie9以上都采用d3.js来画图。

ie8下画vml，需要修改html的属性，在画图前执行该函数。（申明下：不考虑兼容ie8以下的浏览器）

第一步：修改html的属性，调用该函数后就可以通过js动态来添加图了。

function addVmlParam() {if (!document.namespaces['v']) {if (document.documentMode && document.documentMode >= 8) {var o = document.getElementsByTagName("HTML") || document.getElementsByTagName["html"];o[0].setAttribute("xmlns:v", "urn:schemas-microsoft-com:vml");$('<style>v\:rect,v\:Line,v\:oval,v\:PolyLine{ display:inline-block }</style>').appendTo(document.body);}}
}

第二步：ie8 下添加vml元素需要添加

 if ($.browser.msie8) {$('<?import namespace="v" implementation="#default#VML" ?>' +'<v:PolyLine filled="false" Points="0,0" style="position:absolute;z-index:80"/>').appendTo(document.body);}

第三步：就是根据d3.js生产的svg元素来转换成vml图元素。

//根据后台url来加载数据 返回一个json字符串
HTreeImg.prototype.loadJson = function (url, fun) {d3.json(url, function (error, root) {fun(root);});//如果是ie8  则进行转换if ($.browser.msie8) {var htreeImg = this;var changeTimeout = setTimeout(function () {htreeImg.changeNodesToVml();htreeImg.changeLinksToVml();}, 100);changeTimeout = null;}
}

核心代码

HTreeImg.prototype.changeNodesToVml = function (root) {function guid() {function S4() {return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);}return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());}function addTexts(texts, htmls) {var curLeft = 0;if (texts.length == 1) {var text = $(texts.get(0)).attr("textContent");var left = $(texts.get(0)).attr("dx");left = left - curLeft;curLeft = curLeft + left;htmls.push('<div class="textContent" style="text-align: center;width:100%;">' + text + '</div>');} else {//循环里面的所有text节点 并进行添加操作texts.each(function () {var text = $(this).attr("textContent");var left = $(this).attr("dx");left = left - curLeft;curLeft = curLeft + left;htmls.push('<div class="textContent" style="left:' + left + 'px">' + text + '</div>');});}}var hTreeImg = this;var _options = this.nodeOptions;//获取所有节点 并且进行循环var nodes = $("svg").find(".node");var orgTree=this;nodes.each(function () {var transform = $(this).attr("transform");var ary = _getXYPosition(transform);var texts = $(this).find("text");var htmls = [];addTexts(texts, htmls);var nodeId=$(this).find("rect").attr("nodeId");var nodeDepth=$(this).find("rect").parent().attr("depth");console.log(nodeDepth)//对第一个节点进行处理var leftPx = ary.x;//根据传入的左边距 对所有节点进行边距移动操作leftPx = ary.x + hTreeImg._marginLeft;var nodeDivId = guid();$("<div id='" + nodeDivId + "' nodeId='"+nodeId+"' class='textDiv text_clearFix' " +"style='top:" + (ary.y + 8) + "px;" +"width:" + _options["width"] + "px;" +"height:" + _options["height"] + "px;" +"background-color:" + _options["bgColor"] + ";" +"left:" + (leftPx) + "px'>"+ htmls.join("\n")+ "</div>").appendTo(document.body);//注册点击事件if (_options["fun"] != null) {$("#" + nodeDivId).click(function () {var nodeData=orgTree.data[$(this).attr("nodeId")];if(nodeData!=null){_options["fun"](nodeData);}nodeData=null;})}})
}

使用d3画横向组织架构图，兼容ie8（一）相关推荐

Html画组织架构图
/*** Created with JetBrains PhpStorm.* User: kathleen* Date: 12-12-16* Time: 下午1:10* To change this ...
【图形设计】什么是组织架构图？如何画组织架构图
什么是组织架构图?组织架构图即用于呈现组织构架的图示,通常也可以称为组织结构图,是一种用于直观反映群体关系内组织构架的图表. 一.组织架构图的作用组织架构图作为一种反映群体内组织架构情况的图示,不仅 ...
vue——实现组织架构图(vue-org-tree)——技能提升
关于组织架构图,效果图如下: 之前我是用jq写过一个组织架构图,文章链接如下:当时是用的jOrgChart jq版本的组织架构图:https://blog.csdn.net/yehaocheng520 ...
iphone开发 IOS 组织架构图
转载自 :http://blog.csdn.net/mashi321323/article/details/18267719 登录 | 注册 mashi321323的专栏目录视图摘要视图订阅 1 ...
vue2--基于zm-tree-org实现公司部门组织架构图
1.安装zm-tree-org npm i zm-tree-org -S 2.引入使用 import Vue from 'vue'; import ZmTreeOrg from 'zm-tree-or ...
对话框绘制完成消息_Word小技巧-一分钟教会你快速绘制组织架构图
又到了新的一年,各个公司也开始对自家的制度和规划开展梳理,其中有一个重要的事情那就是,公司的组织架构调整,这代表着我们又要重新开始绘制组织架构图了,你是怎么做的呢?还在一个一个的绘制图框,再输入文字, ...
excel表中怎么插入visio_快速制作组织架构图，还在用Visio就out了，Excel简单三步搞定...
工作中相信绝大多数人都见过一种图表类型,那就是组织架构图.组织架构图经常用于企业内部部门结构.人员编制分工的展示.通过组织架构图,我们能够清晰的查看到各部门人员结构.业务等情况. 如上图所示,我们需要 ...
excel流程图分叉合并_快速制作组织架构图，层次结构图，流程图等，只需学会这个功能...
Hello,大家好,今天跟大家分享下一个excel中非常实用,他就是SmartArt图形, 下面这个图形都是使用SmartArt制作的,有组织架构图,关系包含图,流程图等,是不是感觉非常的好看呢?他们 ...
.net MVC使用GetOrgChart实现树形关系结构组织架构图
原文地址今天做公司项目时,需要实现一个树形关系的组织架构图,网上查了一些资料,发现GetOrgChart框架(感兴趣可以研究研究)很好的实现了这一需求,于是用到了项目中,下面先上一个成果图. 如图所 ...

使用d3画横向组织架构图，兼容ie8（一）

使用d3画横向组织架构图，兼容ie8（一）相关推荐

最新文章

热门文章