Network graph - nodes with custom thumbnails
ZoomCharts.com site structure
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
var t = new NetChart({
container: document.getElementById("demo"),
data:{ url: "/dvsl/data/net-chart/map-mst.json" },
navigation:{
initialNodes:["https://zoomcharts.com/en/"],
mode:"focusnodes",
focusNodeExpansionRadius: 1
},
style:{
nodeStyleFunction: nodeStyle,
nodeLabel:{
padding:1,
backgroundStyle: {
fillColor:'#09c'
},
textStyle: {
fillColor: "white"
}
}
}
});
function nodeStyle(node){
if (node.data.label){
node.label = node.data.label;
} else {
node.label = node.id;
}
node.image = "/dvsl/doc/net-chart/images/screenshots-min/" +
node.label
.replace(new RegExp("[^a-zA-Z0-9]", "g"), " ")
.trim()
.replace(new RegExp("[ -]+", "g"), "-") +
".jpg";
node.label = node.label
.replace(new RegExp("https:\/\/zoomcharts\\.com\/", "g"), "")
.split("/")
.join("/");
var radius = 0;
if (node.dataLinks && node.dataLinks.length){
radius = node.dataLinks.length+10;
}
node.radius = radius;
//add plus marks on nodes that have hidden links
if (node.dataLinks.length > node.links.length){
node.items = [{px: 0,py:-1, text:"+", backgroundStyle:{fillColor: "orange"}}];
}else{
node.items = [];
}
}