Demo for D3SimpleNetwork

https://github.com/davcs86/d3-polytree-graph

by David Castillo

HTML

<script src="https://rawgit.com/davcs86/d3-simple-networks/master/dist/d3-simple-networks.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

CSS

body {
  width: 800px;
  height: 400px;
}

JavaScript

var network = new D3SimpleNetwork({
  "container": "body",
  "nodes": {
    "NODE_A": {
      "adjacencyList": {
        "NODE_A_TR": 1
      },
      "label": "Node-A",
      "iconType": "field",
      "attachedData": {
        "Qg": ["1", "1.2"],
        "Qo": ["100", "105"]
      }
    },
    "NODE_A_TR": {
      "adjacencyList": {
        "NODE_A_TR_NODE_B": 1
      },
      "label": "Node-A refinery",
      "iconType": "transport",
      "attachedData": {
        "Qg": ["n/a", "1.1"],
        "Qo": ["n/a", "101"]
      }
    },
    "NODE_B": {
      "adjacencyList": {
        "NODE_A_TR_NODE_B": 1
      },
      "label": "Node-B",
      "iconType": "field",
      "attachedData": {
        "Qg": ["1.5", "1.7"],
        "Qo": ["140", "150"]
      }
    },
    "NODE_A_TR_NODE_B": {
      "adjacencyList": {
        "NODE_C": {
          color: "red",
          label: "to node C"
        }
      },
      "label": "Node-A refinery + Node-B",
      "iconType": "storage",
      "attachedData": {
        "Qg": ["2.6", "2.7"],
        "Qo": ["245", "250"]
      },
      positionX: 780,
      positionY: 345,
      overridePosition: true
    },
    "NODE_C": {
      "adjacencyList": null,
      "label": "Node C",
      "iconType": "transfer",
      "attachedData": {
        "Qg": ["2.45", "2.5"],
        "Qo": ["232", "230"]
      }
    }
  },
  scale: 0.5,
  "tableHeaders": ["Var", "Reported", "Fixed"],
  floatingLabels: [{
    id: '1',
    label: "Arbitrary label",
    x: 150,
    y: 70,
    'font-size': 30,
    color: 'red'
  }]
});