d3+js横向图

最新推荐文章于 2025-02-26 15:41:38 发布
冒菜-码农
最新推荐文章于 2025-02-26 15:41:38 发布
阅读量1.4k
点赞数 1
分类专栏： javaweb
本文链接：https://blog.csdn.net/qq_33333654/article/details/107904836
版权
<!doctype html>
<html>
<head>
    <meta charset="utf-8">

    <!-- <link rel="stylesheet" type="text/css" href="gqct.css"> -->
    <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'