D3 testing of tree diagram

by jeppeskajaa

HTML

<!DOCTYPE html>
<meta charset="UTF-8">

<!-- load the d3.js library -->	
<!-- script src="https://d3js.org/d3.v4.min.js"></script-->

CSS

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 3px;
}

.node text {
  font: 12px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}

JavaScript

var margin = {
    top: 20,
    right: 120,
    bottom: 20,
    left: 120
},
width = 960 - margin.right - margin.left,
height = 800 - margin.top - margin.bottom;


var json = 
[
  {
    "docType": "pharma",
    "ingoingBatch": "BC1",
    "ingoingMatNo": 1000000,
    "ingoingQuantity": 10000,
    "ingoingUnit": "EA",
    "process": "API",
    "processOrder": 1000000000,
    "deliveryPlant": 3,
    "outgoingMatNo": 1000000,
    "outgoingBatch": "CD1",
    "outgoingQuantity": 10000,
    "outgoingUnit": "EA",
    "firstTransactionDate": "14/01/2019 00.00",
    "latestTransactionDate": "15/01/2019 00.00",
    "counterIndex": "5"
  },
  {
    "docType": "pharma",
    "ingoingBatch": "BC2",
    "ingoingMatNo": 1000000,
    "ingoingQuantity": 10000,
    "ingoingUnit": "EA",
    "process": "API",
    "processOrder": 1000000000,
    "deliveryPlant": 3,
    "outgoingMatNo": 1000000,
    "outgoingBatch": "CD1",
    "outgoingQuantity": 10000,
    "outgoingUnit": "EA",
    "firstTransactionDate": "14/01/2019 00.00",
    "latestTransactionDate": "15/01/2019 00.00",
    "counterIndex": "6"
  },
  {
    "docType": "pharma",
    "ingoingBatch": "AB1",
    "ingoingMatNo": 1000000,
    "ingoingQuantity": 10000,
    "ingoingUnit": "EA",
    "process": "PUR",
    "processOrder": 1000000000,
    "deliveryPlant": 3,
    "outgoingMatNo": 1000000,
    "outgoingBatch": "BC1",
    "outgoingQuantity": 10000,
    "outgoingUnit": "EA",
    "firstTransactionDate": "14/01/2019 00.00",
    "latestTransactionDate": "15/01/2019 00.00",
    "counterIndex": "1"
  },
  {
    "docType": "pharma",
    "ingoingBatch": "AB2",
    "ingoingMatNo": 1000000,
    "ingoingQuantity": 10000,
    "ingoingUnit": "EA",
    "process": "PUR",
    "processOrder": 1000000000,
    "deliveryPlant": 3,
    "outgoingMatNo": 1000000,
    "outgoingBatch": "BC1",
    "outgoingQuantity": 10000,
    "outgoingUnit": "EA",
    "firstTransactionDate": "14/01/2019 00.00",
    "latestTransactionDate": "15/01/2019 00.00",
   ...