D3 Examples - d3 Multi Flow Container Demo

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
​
        .demo .canvas .background {
            fill: #F3F3F3;
            stroke: #333333;
        }
        .demo .wrapper.outer > .background {
            fill: #000000;
        }
        .demo .wrapper.inner > .background {
            fill: #DDDDDD;
        }
​
        rect.selection {
            stroke          : #111111;
            stroke-dasharray: 2px;
            stroke-opacity  : 0.75;
            fill            : transparent;
        }
​
​
        /* SHAPES */
        .demo .shape .background {
            fill: #0078E7;
            stroke: #333333;
            stroke-width: 0.5;
        }
        .demo .shape.selected > .background {
            stroke-dasharray: 2px;
            stroke-width  : 3;
            stroke: #000000;
            filter: "";
        }
        .demo .shape .label {
            font                : 12px sans-serif;
            pointer-events      : none;
            fill: #FFFFFF;
        }
​
​
        .demo .container .containerGroup .background,
        .demo .flowbox > .background {
            fill: #FFFFFF;
            stroke: #999999;
        }
​
        .demo .flowbox .node > .background {
            fill: #2ECC71;
            stroke: #333333;
            stroke-width: 0.5;
        }
        .demo .flowbox .node > .label {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 11px;
            fill: #000000;
            stroke-width: 0;
        }
​
        .demo .clippath .background {
            fill: #FFFFFF;
        }
​
        /* HANDLES */
        .demo .handle .background {
            fill: #F1C40F;
            stroke: #333333;
            stroke-width: 1;
        }
        .demo .handle .vertical {
            cursor: ns-resize;
        }
        .demo .handle .horizontal {
            cursor: ew-resize;
        }
​
​
        /* SVG */
        svg *::selection {
            background: transparent;
        }
​
        svg *::-moz-selection {
            background: transparent;
        }
​
        svg *::-webkit-selection {
            background: transparent;
        }
​
        /* HTML */
        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 12px;
        }
​
        .pure-button {
            font-family: inherit;
            font-size: 100%;
            *font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/
            *overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */
            padding: 0.5em 1em;
            color: #444; /* rgba not supported (IE 8) */
            color: rgba(0, 0, 0, 0.80); /* rgba supported */
            *color: #444; /* IE 6 & 7 */
            border: 1px solid #999;  /*IE 6/7/8*/
            border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
            background-color: #E6E6E6;
            text-decoration: none;
            border-radius: 2px;
            margin: 0 5px;
        }
​
        .pure-button-hover,
        .pure-button:hover,
        .pure-button:focus {
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
            background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
            background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
            background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
            background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
        }
        .pure-button:focus {
            outline: 0;
        }
        .pure-button-active,
        .pure-button:active {
            box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
        }
​
        /* Firefox: Get rid of the inner focus border */
        .pure-button::-moz-focus-inner{
            padding: 0;
            border: 0;
        }
​
        .pure-button-primary,
        .pure-button-selected,
        a.pure-button-primary,
        a.pure-button-selected {
            background-color: rgb(0, 120, 231);
            color: #fff;
        }
​
        ul {
            margin-top: 4px;
        }
    </style>
    <script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script>
    <script src="demo.base.js"></script>
    <script src="demo.util.js"></script>
    <script src="demo.shape.js"></script>
    <script src="demo.container.js"></script>
    <script src="demo.handle.js"></script>
    <script src="demo.layout.flow.js"></script>
    <script src="demo.flowbox.js"></script>
</head>
​
<body>
<ul>
    <li>Use resize handles to change width of shapes and reflow children</li>
    <li>Drag containers around and drag on the background to use selection rectangle</li>
    <li>Add additional container using the link provided</li>
</ul></h5>
<button id="addContainer" class="pure-button pure-button-primary">Add Container</button>
<p/>
<div id="demo"></div>
<script type="text/javascript">
    var lastXY = 10;
    var canvasWidth = 800;
    var demo = d3.demo.app().width(600).height(600);
    d3.select("#demo").call(demo);
​
    d3.select("#addContainer").on("click", function() {
        addContainer("Container").x(lastXY).y(lastXY).width(200).height(350);
        lastXY += 10;
    });
​
    function addContainer(titleArg) {
        var container = d3.demo.container();
        demo.addShape(container
                        .label(titleArg)
                        .children([{id:1,name:"child1"},   {id:2,name:"child2"},   {id:3,name:"child3"},
                                   {id:4,name:"child4"},   {id:5,name:"child5"},   {id:6,name:"child6"},
                                   {id:7,name:"child7"},   {id:8,name:"child8"},   {id:9,name:"child9"},
                                   {id:10,name:"child10"}, {id:11,name:"child11"}, {id:12,name:"child12"},
                                   {id:13,name:"child13"}, {id:14,name:"child14"}, {id:15,name:"child15"}]));
        return container;
    }
​
    addContainer("RESIZE ME").x(20).y(10).width(200).height(475);
    addContainer("RESIZE ME").x(300).y(10).width(210).height(400);
</script>
</body>
</html>
    