I was trying to implement a simple html based demo of the examples given on the website. I have never worked with javascript or html before. Could someone look at the setup below and please help me out!
<head>
title
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="jsnetworkx.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<svg width="960" height="600"></svg>
<script>
$(window).load(function (){
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
// This is a graph generator
var G = jsnx.cycleGraph(6);
// Compute the shortest path between 0 and 4
var path = jsnx.bidirectionalShortestPath(G, 0, 4);
// A simple way to color all nodes in the path:
G.addNodesFrom(path, {color: '#FFF'});
// Color the start and end differently
G.node.get(0).color = '#0F0'; // start is green
G.node.get(4).color = '#F00'; // end is red
console.log(G.nodes());
jsnx.draw(G, {
element: '#demo-canvas',
withLabels: true,
nodeStyle: {
fill: function(d) {
return d.data.color || '#AAA'; // any node without color is gray
}
}
});
});
</script>
</body>
Hi,
I was trying to implement a simple html based demo of the examples given on the website. I have never worked with javascript or html before. Could someone look at the setup below and please help me out!