d3+js横向图

素颜马尾好姑娘i 2022-11-26 01:44 320阅读 0赞

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
    
        
        <title>d3+jQuery横向树图</title>
        <script src="https://cdn.bootcss.com/d3/3.2.7/d3.min.js"></script>
        <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    </head>
    
    <body>
    <div class="container" id="treecontainer">
        <div class="menu">
            <div id="product_tree"></div>
        </div>
    </div>
    </body>
    <script type="text/javascript">
        var container;
        var zoom;
        var rootData;
        var depthInfo;
        var rootName;//根节点名称
    
        jQuery(document).ready(function () { 
            /* resizeScreen();*/
    
            //selectChange();
            var child=document.getElementById("product_tree");
            child.innerHTML = '';
            getData();
        });
    
        var getData =function() { 
            rootData ={ 
        "downward": { 
            "orderId": "94970e083e9c4b36a821fc0ebd65cf7b",
            "children": [
                { 
                    "isExpand": true,
                    "amount": "物流送往公司",
                    "orderId": "94970e083e9c4b36a821fc0ebd65cf7b",
                    "children": [
                        { 
                            "isExpand": true,
                            "amount": "物流送达公司",
                            "orderId": "94970e083e9c4b36a821fc0ebd65cf7b",
                            "children": [
                                { 
                                    "isExpand": true,
                                    "amount": "00000021",
                                    "orderId": "94970e083e9c4b36a821fc0ebd65cf7b",
                                    "children": [
                                        
                                    ],
                                    "hasChildren": true,
                                    "name": "00000021样本指派到实验室",
                                    "text": "",
                                    "hasHumanholding": true,
                                    "ratio": ""
                                },
                                { 
                                    "isExpand": true,
                                    "amount": "2020-08-06 09:36:28",
                                    "orderId": "94970e083e9c4b36a821fc0ebd65cf7b",
                                    "children": [
                                        
                                    ],
                                    "hasChildren": true,
                                    "name": "物流测试账号派送中",
                                    "text": "",
                                    "hasHumanholding": true,
                                    "ratio": "00000021"
                                },
                                { 
                                    "isExpand": true,
                                    "amount": "2020-08-06 09:40:09",
                                    "orderId": "94970e083e9c4b36a821fc0ebd65cf7b",
                                    "children": [
                                        
                                    ],
                                    "hasChildren": true,
                                    "name": "技术员测试账号审核通过",
                                    "text": "驻点",
                                    "hasHumanholding": true,
                                    "ratio": "00000021"
                                },
                                { 
                                    "isExpand": true,
                                    "amount": "2020-08-06 10:28:00",
                                    "orderId": "94970e083e9c4b36a821fc0ebd65cf7b",
                                    "children": [
                                        
                                    ],
                                    "hasChildren": true,
                                    "name": "技术员测试账号质检通过",
                                    "text": "",
                                    "hasHumanholding": true,
                                    "ratio": "00000021"
                                }
                            ],
                            "hasChildren": true,
                            "name": "测试账号签收",
                            "text": "",
                            "hasHumanholding": true,
                            "ratio": "2020-08-06"
                        }
                    ],
                    "hasChildren": true,
                    "name": "物流测试账号签收",
                    "text": "22222",
                    "hasHumanholding": true,
                    "ratio": "12312312312"
                }
            ],
            "name": "origin",
            "direction": "downward"
        }
    }
            rootName = '科技有限公司';
            drawing();
        };
        var	drawing = function() { 
            var _this = this;
            // var rootName = ''; //根节点的名字
            var rootRectWidth = 0; //根节点rect的宽度
            var forUpward = true;
    
            var treeChart = function(d3Object) { 
                this.d3 = d3Object;
                this.directions = ['downward'];
            };
    
    
            treeChart.prototype.drawChart = function() { 
                // First get tree data for both directions.
                this.treeData = { };
                var self = this;
                self.directions.forEach(function(direction) { 
                    self.treeData[direction] = _this.rootData[direction];
                });
                // rootName = '北京伴学科技有限公司';
                rootRectWidth = _this.rootName.length * 15;
                self.graphTree(self.getTreeConfig());
            };
    
            treeChart.prototype.getTreeConfig = function() { 
                var treeConfig = { 
                    'margin': { 
                        'top': 10,
                        'right': 5,
                        'bottom': 0,
                        'left': 5
                    }
                }
    
                treeConfig.chartWidth = (1600 - treeConfig.margin.right - treeConfig.margin.left);
                treeConfig.chartHeight = (800 - treeConfig.margin.top - treeConfig.margin.bottom);
                treeConfig.centralHeight = treeConfig.chartHeight / 2;
                treeConfig.centralWidth = treeConfig.chartWidth / 6;
                treeConfig.linkLength = 300;
                treeConfig.duration = 500; //动画时间
                return treeConfig;
            };
    
            treeChart.prototype.graphTree = function(config) { 
    
    
                var self = this;
                var d3 = this.d3;
                var linkLength = config.linkLength;
                var duration = config.duration;
                var hasChildNodeArr = [];
                var id = 0;
                var diagonal = d3.svg.diagonal()
                    .projection(function(d) { 
                        return [d.y, d.x];
                    });
                var pathFunc;
                if (false) { 
                    pathFunc = diagonal;
                } else { 
                    pathFunc = funLine;
                }
                var zoom = d3.behavior.zoom()
                    .scaleExtent([0.5, 2])
                    .on('zoom', redraw);
                var svg = d3.select('#product_tree')
                    .append('svg')
                    .attr('width', config.chartWidth + config.margin.right + config.margin.left)
                    .attr('height', config.chartHeight + config.margin.top + config.margin.bottom)
                    .attr('xmlns','http://www.w3.org/2000/svg')
                    .on('mousedown', disableRightClick)
                    .call(zoom)
                    .on('dblclick.zoom', null);
                var treeG = svg.append('g')
                    .attr('class', 'gbox')
                    .attr('transform', 'translate(' + config.margin.left + ',' + config.margin.top + ')');
    
                //箭头
                var markerDown = svg.append("marker")
                    .attr("id", "resolvedDown")
                    .attr("markerUnits", "strokeWidth") //设置为strokeWidth箭头会随着线的粗细发生变化
                    .attr("markerUnits", "userSpaceOnUse")
                    .attr("viewBox", "0 -5 10 10") //坐标系的区域
                    .attr("refX", 0) //箭头坐标
                    .attr("refY", 0)
                    .attr("markerWidth", 12) //标识的大小
                    .attr("markerHeight", 12)
                    .attr("orient", "0") //绘制方向，可设定为：auto（自动确认方向）和 角度值
                    .attr("stroke-width", 2) //箭头宽度
                    .append("path")
                    .attr("d", "M0,-5L10,0L0,5") //箭头的路径
                    .attr('fill', '#000'); //箭头颜色
    
                // Initialize the tree nodes and update chart.
                for(var d in this.directions) { 
                    var direction = this.directions[d];
                    var data = self.treeData[direction];
                    if (typeof(data) != "undefined") { 
                        data.x0 = config.centralHeight;
                        data.y0 = config.centralWidth;
                        data.children.forEach(collapse);
                        console.log(treeG)
                        update(data, data, treeG);
                    }
                }
                function update(source, originalData, g) { 
                    console.log(source)
                    var direction = originalData['direction'];
                    var node_class = direction + 'Node';
                    var link_class = direction + 'Link';
                    var downwardSign =1;
                    var nodeColor = '#8b4513';
    
                    var isExpand = false;
                    var nodeSpace = 160;
                    var tree = d3.layout.tree().sort(sortByDate).nodeSize([nodeSpace, 0]);
                    var nodes = tree.nodes(originalData);
                    var links = tree.links(nodes);
                    var offsetY = -config.centralHeight;
    
                    nodes.forEach(function(d) { 
                        d.y = downwardSign * (d.depth * linkLength) + config.centralWidth;
                        d.x = d.x - offsetY;
                        if(d.name == 'origin') { 
                            d.x = config.centralHeight;
                            d.y += downwardSign * 0; // 左右两树图根节点之间的距离
                        }
                    });
    
                    // Update the node.
                    var node = g.selectAll('g.' + node_class)
                        .data(nodes, function(d) { 
                            return d.id || (d.id = ++id);
                        });
                    var nodeEnter = node.enter().append('g')
                        .attr('class', node_class)
                        //			.classed('alink',true)//为选择名称而添加的统一class
                        .attr('data-text', function(d) { 
                            return d.name;
                        })
                        .attr('transform', function(d) { 
                            return 'translate(' + source.y0 + ',' + source.x0 + ')';
                        })
                        .style('cursor', function(d) { 
                            return(d.name == 'origin') ? '' : (d.children || d._children) ? 'pointer' : '';
                        });
                    // .on('click', click);
    
    
                    nodeEnter.append("svg:rect")
                        .attr("x", function(d) { 
                            return(d.name == 'origin') ? -(rootRectWidth / 2) : 95;
                        })
                        .attr("y", function(d) { 
                            return(d.name == 'origin') ? -20 : -16;
                        })
                        .attr("width", function(d) { 
                            return(d.name == 'origin') ? rootRectWidth : 150;
                        })
                        .attr("height", 40)
                        .attr("rx", 10)
                        .style("stroke", function(d) { 
                            return(d.name == 'origin') ? "#0505ee" : "#CCC";//外边框颜色
                        })
                        .on('click',function(d) { 
                            get_click(d);//节点的点击事件 d为节点自身内容
                        })
                        .style("fill", function(d) { 
                            return(d.name == 'origin') ? "#0080E3" :  "#FFF";//节点背景色
                        });
    
                    nodeEnter.append('circle')
                        .attr('r', 1e-6);
                    nodeEnter.append("text")
                        .attr("class", "linkname")
                        .attr("x",function(d) { 
                            return(d.name == 'origin') ? '0' : '170';
                        })
                        .attr('dy', function(d) { 
                            return(d.name == 'origin') ? '.35em' : '-3';
                        })
                        .attr("text-anchor",'middle')
                        .attr('fill', '#337ab7')
                        .text(function(d) { 
                            if(d.name == 'origin') { 
                                // return ((forUpward) ? '根节点TOP' : '根节点Bottom');
                                return _this.rootName;
                            }
                            if(d.repeated) { 
                                return '[Recurring] ' + d.name;
                            }
                            return(d.name.length > 10) ? d.name.substr(0, 10) : d.name;
                        })
                        .style({ 
                            'fill-opacity': 1e-6,
                            'fill': function(d) { 
                                if(d.name == 'origin') { 
                                    return '#fff';
                                }
                            },
                            'font-size': function(d) { 
                                return(d.name == 'origin') ? 14 : 13;
                            },
                            'cursor': "pointer"
                        })
                        .on('click', Change_modal);
    
                    nodeEnter.append("text")
                        .attr("class", "linkname")
                        .attr("x",function(d) { 
                            return(d.name == 'origin') ? '0' : '170';
                        })
                        .attr("dy", function(d) { 
                            return(d.name == 'origin') ? '0' :'9';
                        })
                        .attr("text-anchor",'middle')
                        .text(function(d) { 
                            return d.name.substr(10, d.name.length);
                        })
                        .style({ 
                            'fill': '#337ab7',
                            'font-size': function(d) { 
                                return(d.name == 'origin') ? 14 : 13;
                            },
                            'cursor': "pointer"
                        });
                        /*.on('click',function(d) { 
                          
                        });*/
                    nodeEnter.append("text")
                        .attr("x",function(d) { 
                            return(d.name == 'origin') ? '0' : '170';
                        })
                        .attr("dy", function(d) { 
                            return(d.name == 'origin') ? '.35em' :  '20';
                        })
                        .attr("text-anchor",'middle')
                        .attr("class", "linkname")
                        .style("fill", "#7F7F7F")
                        .style('font-size', 10)
                        .text(function(d) { 
                            var str = (d.name == 'origin') ? '' :d.amount;
                            return(str.length > 13) ? str.substr(0, 13) + ".." : str;
                        });
                    nodeEnter.append("text")
                        .attr("x", "0")
                        .attr("dy", function(d) { 
                            return(d.name == 'origin') ? '.35em' :'-5';
                        })
                        .attr("text-anchor", "start")
                        .attr("class", "linkname")
                        .style("fill", "green")
                        .style('font-size', 10)
                        .style("width", "500")
                        .text(function(d) { 
                            return(d.name == 'origin') ? "" : d.ratio;
                        });
    
                    nodeEnter.append("text")
                        .attr("x", '35')
                        .attr("dy", function(d) { 
                            return(d.name == 'origin') ? '.35em' :'15';
                        })
                        .attr("text-anchor", "start")
                        .attr("class", "linkname")
                        .style("fill", "#0ba4ec")
                        .style('font-size', 10)
                        .text(function(d) { 
                            return(d.name == 'origin') ? "" : d.text;
                        });
    
    
                    // 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', function(d) { 
                            return(d.name == 'origin') ? 0 : (hasChildNodeArr.indexOf(d) == -1) ? 0 : 6;
                        })
                        .attr('cx', function(d) { 
                            return(d.name == 'origin') ? -20 : 251;
                        })
                        .style('fill', function(d) { 
                            return hasChildNodeArr.indexOf(d) != -1 ? "#fff" : "";
                            // if (d._children || d.children) {  return "#fff"; } else {  return "rgba(0,0,0,0)"; }
                        })
                        .style('stroke', function(d) { 
                            return hasChildNodeArr.indexOf(d) != -1 ? "#8b4513" : "";
                            // if (d._children || d.children) {  return "#8b4513"; } else {  return "rgba(0,0,0,0)"; }
                        })
                        .style('fill-opacity', function(d) { 
                            if(d.children) { 
                                return 0.35;
                            }
                        })
                        // Setting summary node style as class as mass style setting is
                        // not compatible to circles.
                        .style('stroke-width', function(d) { 
                            if(d.repeated) { 
                                return 5;
                            }
                        });
                    //代表是否展开的+-号
                    nodeEnter.append("svg:text")
                        .attr("class", "isExpand")
                        .attr("x", "251")
                        .attr("dy", function(d) { 
                            return 3;
                        })
                        .attr("text-anchor", "middle")
                        .style("fill", "#000")
                        .text(function(d) { 
                            if(d.name == 'origin') { 
                                return '';
                            }
                            return hasChildNodeArr.indexOf(d) != -1 ? "+" : "";
                            /* if (d._children || d.children) { 
                              return "+";
                            } */
                        })
                        .on('click',click);
    
                    nodeUpdate.select('text').style('fill-opacity', 1);
    
                    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);
    
                    var link = g.selectAll('path.' + link_class)
                        .data(links, function(d) { 
                            return d.target.id;
                        });
    
                    link.enter().insert('path', 'g')
                        .attr('class', link_class)
                        .attr('stroke',function(d){ 
                            return '#8b4513';
                        })
                        .attr('fill',"none")
                        .attr('stroke-width','1px')
                        .attr('opacity', 0.5)
                        .attr('d', function(d) { 
                            var o = { 
                                x: source.x0,
                                y: source.y0
                            };
                            return pathFunc({ 
                                source: o,
                                target: o
                            });
                        })
                        .attr("marker-end", function(d) { 
                            return "url(#resolvedDown)";
                        }) //根据箭头标记的id号标记箭头;
                        .attr("id", function(d, i) { 
                            return "mypath" + i;
                        });
                    link.transition()
                        .duration(duration)
                        .attr('d', pathFunc);
                    link.exit().transition()
                        .duration(duration)
                        .attr('d', function(d) { 
                            var o = { 
                                x: source.x,
                                y: source.y
                            };
                            return pathFunc({ 
                                source: o,
                                target: o
                            });
                        })
                        .remove();
                    nodes.forEach(function(d) { 
                        d.x0 = d.x;
                        d.y0 = d.y;
                    });
                    if(!!source.children && source.children.length>0){ 
                        for(let t=0;t<source.children.length;t++){ 
                            if(source.children[t].isExpand){ 
                                console.log(source)
                                // update(source.children[t], originalData, g);
                                click(source.children[t])
                            }
                        }
                    }
    
    
                    function get_click(d){ 
                        console.log(d)
                       
                    }
                    function Change_modal () { 
                        _this.Modal = true
                    }
                    function click(d) { 
                        console.log(d)
                        if(forUpward) { 
    
                        } else { 
                            if(d._children) { 
                                console.log('对外投资--ok')
                            } else { 
                                console.log('对外投资--no')
                            }
                        }
                        isExpand = !isExpand;
                        if(d.name == 'origin') { 
                            return;
                        }
                        if(d.children) { 
                            d._children = d.children;
                            d.children = null;
                            d3.select(this).text('+')
                        } else { 
                            d.children = d._children;
                            d._children = null;
                            // expand all if it's the first node if(d.name == 'origin') { d.children.forEach(expand); } d3.select(this).text('-') } // console.log(d) // console.log(originalData) // console.log(g) update(d, originalData, g); } } function expand(d) { if(d._children) { d.children = d._children; d.children.forEach(expand); d._children = null; } } function collapse(d) { if(d.children && d.children.length != 0) { d._children = d.children; d._children.forEach(collapse); d.children = null; hasChildNodeArr.push(d); } } function redraw() { treeG.attr('transform', 'translate(' + d3.event.translate + ')' + ' scale(' + d3.event.scale + ')'); } function disableRightClick() { // stop zoom if(d3.event.button == 2) { console.log('No right click allowed'); d3.event.stopImmediatePropagation(); } } function sortByDate(a, b) { var aNum = a.name.substr(a.name.lastIndexOf('(') + 1, 4); var bNum = b.name.substr(b.name.lastIndexOf('(') + 1, 4); return d3.ascending(aNum, bNum) || d3.ascending(a.name, b.name) || d3.ascending(a.id, b.id); } }; var d3GenerationChart = new treeChart(d3); d3GenerationChart.drawChart(); }; var funLine = function(obj) { //折线 var s = obj.source; // console.log('获取折线对象1：'+s.y); var sy = (s.name == 'origin' ? s.y+60 :s.y+260); // console.log('获取折线对象2：'+sy); var t = obj.target; var ty = (t.name == 'origin' ? t.y+90 :t.y+85); return "M"+sy+","+s.x+"L"+(sy+(ty-sy)/2)+","+s.x+"L"+(sy+(ty-sy)/2)+","+t.x+"L"+ty+","+t.x; } var downloadfun = function() { //下载 // 注释该方法为svg 直接下载 // var SvgSaver = require('svgsaver'); // if using CommonJS environment // var svgsaver = new SvgSaver(); // creates a new instance // var svg = document.querySelector('#product_tree'); // find the SVG element
            //  svgsaver.asSvg(svg);                                // save as SVG
    
            var g = document.getElementById('product_tree').getElementsByTagName('g')[0].getBBox();
            var gbox = document.getElementById('product_tree').getElementsByClassName('gbox')[0];
            var x = -g.x;//计算偏移位置
            var y = -g.y;
            gbox.style.transform = "translate(" + x + 'px' + "," + y + "px" + ") scale(1)"; //偏移位置
            var svgbox = $('#product_tree svg')
            var boxwidth = svgbox.width;
            var boxheight = svgbox.height;
            svgbox.attr('width', g.width)
            svgbox.attr('height', g.height)
            var canvas = document.createElement("canvas");
            var c = canvas.getContext('2d');
            //新建Image对象
            //svg内容
            var svg = document.getElementById('product_tree').innerHTML;
            var img = new Image();
    
            img.src = 'data:image/svg+xml,' + unescape(encodeURIComponent(svg));//svg内容中可以有中文字符
            img.src = 'data:image/svg+xml,' + svg;//svg内容中不能有中文字符
            img.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg)));
            //图片初始化完成后调用
            img.onload = function() { 
                //将canvas的宽高设置为图像的宽高
                canvas.width = img.width;
                canvas.height = img.height+60;
                c.fillStyle = "#fff";
                c.fillRect(0, 0, canvas.width, canvas.height);
                c.drawImage(img, 0, 30);
                //canvas画图片
    
                var a = document.createElement("a");
                a.download = "png";
                a.href= canvas.toDataURL("image/png");
                a.click();
            }
            //图片转换为base64后 传给后端 发邮件
            gbox.style.transform = ''
            // svgbox.attr('width',boxwidth)
            // svgbox.attr('height',boxheight)
            svgbox.attr('width',1100)
            svgbox.attr('height',600)
    
            // 结束
        }
    
    </script>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMzNjU0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMzNjU0_size_16_color_FFFFFF_t_70]: /images/20221124/fd7e4568c849460ca6fb23b2ff7374ae.png