d3.js的demo - 悦读

<!DOCTYPE html>
<html style="overflow: hidden;">
<head>
    <meta charset="UTF-8">
    <title>流程设计工具</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.bootcss.com/d3/4.11.0/d3.min.js"></script>
    <script src="https://cdn.bootcss.com/d3-transform/1.0.4/d3-transform.min.js"></script>
    <style type="text/css">
        .left-wrapper {
    
            width: 250px;
            position: absolute;
            top:0px;
            bottom: 0px;
            left: 0px;
            background: #f0f0f0;
            border-right: solid 1px #e7e7e7;
        }
        .middle-wrapper {
    
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 250px;
            right: 250px;
        }
        .right-wrapper {
    
            position: absolute;
            width: 250px;
            top: 0px;
            bottom: 0px;
            right: 0px;
            background: #f5f5f5;
            border-left: solid 1px #e7e7e7;
        }

        .sidebar-nav,
        .sidebar-nav ul {
    
            list-style: none;
            padding: 0px;
        }

        .sidebar-nav > li:nth-child(odd),
        .sidebar-nav ul li:nth-child(odd) {
    
            background: #f0f0f0;
        }
        .sidebar-nav > li:nth-child(even),
        .sidebar-nav ul > li:nth-child(even) {
    
            background: #fff;
        }

        .sidebar-nav li {
    
            text-indent: 4px;
            line-height: 30px;
        }

        .sidebar-nav li li {
    
            text-indent: 15px;
        }

        .sidebar-nav li li li {
    
            text-indent: 25px;
        }

        .sidebar-nav li a {
    
            display: block;
            text-decoration: none;
            color: #333;
        }

        .sidebar-nav li.active a {
    
            background-color: #3e99ff;
        }

        .sidebar-nav li a>i+span {
    
            margin-left: 3px;
        }

        .sidebar-nav li a:hover {
    
            text-decoration: none;
            background: rgba(255, 255, 255, 0.2);
        }

        .sidebar-nav li a:active, .sidebar-nav li a:focus {
    
            text-decoration: none;
        }

        .middle-wrapper h4,
        .right-wrapper h4 {
    
            font-size: 1em;
            height: 40px;
            border-bottom: solid 1px #e7e7e7;
            text-align: center;
            line-height: 40px
        }

        .bpmn .node rect {
    
            width:180px;
            height:36px;
            cursor: pointer;
            stroke: #333;
            stroke-width:2;
            fill: #fff;
        }

        .bpmn .node.active rect,
        .bpmn .node.active circle {
    
            stroke: lightblue;
        }

        .bpmn .node circle {
    
            stroke: #333;
            stroke-width: 2px;
            fill: #fff;
            cursor: crosshair;
        }

        .bpmn .node circle.end {
    
            fill: orange;
        }

        .bpmn .cable {
    
            stroke: #333;
            stroke-width: 2px;
            fill: none;
        }
    </style>
</head>

<body>
<div class="container-fuild">
    <div id="left-wrapper" class="left-wrapper">
        <ul class="sidebar-nav">
            <li>
                <a class="open">
                    <i class="fa fa-folder-o"></i>
                    <span>源/目标</span>
                </a>
                <ul>
                    <li class="node" data-id="101">
                        <a href="">
                            <i class="fa fa-database"></i>
                            <span>读数据</span>
                        </a>
                    </li>
                    <li class="node" data-id="102">
                        <a href="">
                            <i class="fa fa-database"></i>
                            <span>写数据</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a>
                    <i class="fa fa-folder-o"></i>
                    <span>数据预处理</span>
                </a>
                <ul>
                    <li class="node" data-id="211">
                        <a href="">
                            <i class="fa fa-crosshairs" aria-hidden="true"></i>
                            <span>类型转换</span>
                        </a>
                    </li>
                    <li class="node" data-id="212