D3 Examples - d3 flow tree layout

xxxxxxxxxx
 
<html>
<head>
    <meta charset="utf-8">
    <title>Flow Tree Example</title>
    <style>
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
​
        .container {
            background-color: #DDDDDD;
        }
​
        .flowtree {
            background-color: #caddcc;
        }
​
        .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;
        }
​
        path.link {
            fill: none;
            stroke: #9ecae1;
            stroke-width: 1.5px;
        }
    </style>
    <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">
    
    d3.json("flare.json", function(data) {
        
        var flowTree = d3.custom.chart.flow();
​
        d3.select('#flowtree')
            .datum(data)
            .call(flowTree)
                .on("mouseover.customHover", function() {
                console.log("customHover");
            })
            .on("resize.custom", function() {
                console.log("resize.custom");
            })
    });
​
</script>
</body>
</html>
    