Update (With Cloning Needed)
by Nivaldo
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="code-selection">
<select></select>
</div>
CSS
.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
#relationship {
stroke: #197a80;
}
.link.relationship {
stroke: #197a80;
}
circle {
fill: #ccc;
stroke: #333;
stroke-width: 1.5px;
}
circle.generic {
fill: orange;
}
JavaScript
var selectedCode = '0',
path,
circle,
force,
links,
nodes = {},
width = 600,
height = 312;
var allData = {
"0": {
"1": [{
"source": "0",
"target": "PH"
}, {
"source": "KR",
"target": "1"
}, {
"source": "2",
"target": "VZ"
}, {
"source": "3",
"target": "JP"
}],
"2": [{
"source": "CT",
"target": "4"
}, {
"source": "CP",
"target": "5"
}, {
"source": "CT",
"target": "6"
}, {
"source": "PH",
"target": "7"
}, {
"source": "JP",
"target": "8"
}, {
"source": "9",
"target": "DR"
}, {
"source": "10",
"target": "IN"
}, {
"source": "KR",
"target": "11"
}, {
"source": "CP",
"target": "12"
}, {
"source": "TH",
"target": "13"
}],
"0": [{
"source": "14",
"target": "CP"
}, {
"source": "PE",
"target": "15"
}, {
"source": "0",
"target": "PH"
}, {
"source": "16",
"target": "CP"
}, {
"source": "17",
"target": "SE"
}, {
"source": "CP",
"target": "8"
}, {
"source": "CP",
"target": "18"
}, {
"source": "IN",
"target": "19"
}, {
"source": "20",
"target": "TH"
}, {
"source": "CP",
"target": "21"
}]
},
"codes": [{
"text": "A",
"value": "0"
}, {
...