D3 Examples - d3 flow tree layout 2

xxxxxxxxxx
 
<html>
<head>
    <meta charset="utf-8">
    <title>Flow Tree Example 02</title>
    <style>
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
        
        .flowtree {
            margin: 10px;
            padding: 10px;
            height: 900px;
            width: 900px;
            overflow-x: hidden;
            overflow-y: scroll;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 6px rgba(0, 0, 0, 0.1);
            border: 1px solid #AAAAAA;
        }
​
        .chartGroup .background {
            fill: #FFFFFF;
            stroke-width: 0.5;
        }
​
        .node rect {
            cursor: pointer;
            fill: #FFFFFF;
            fill-opacity: 0.5;
            stroke: #333333;
            stroke-width: 1px;
        }
​
        .node text {
            font: 10px sans-serif;
            pointer-events: none;
        }
​
        .ui-resizable-e {
            width: 8px !important;
            right: 2px !important;
        }
        
        .ui-resizable-e:hover {
            border: 1px dashed #333333;
            background-color: #DDDDDD;
        }
    </style>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="core.js"></script>
    <script src="chart.js"></script>
    <script src="layout.js"></script>
</head>
​
<body>
<div id="container" class="container">
<div id="flowtree" class="flowtree"></div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $("#flowtree").resizable({
                handles: 'e',
                maxWidth: 1100,
                minWidth: 400,
                resize: function(event, ui){
                    var currentWidth = ui.size.width;
                    $(this).width(currentWidth);
                    $("#flowtree").trigger("resize");
                }
            });
​
            d3.json("xflare.json", function(data) {
                var flowTree = d3.custom.chart.flow();
                d3.select('#flowtree')
                    .datum(data)
                    .call(flowTree);
            });
        });
    });
​
</script>
</body>
</html>
    