Force Layout JSON Directed Graph using Dot Engine 2, nodes using array of object

Size
3,127 Kb
Views
32,384

How do I make an force layout json directed graph using dot engine 2, nodes using array of object?

Force Layout d3js using JSON data. What is a force layout json directed graph using dot engine 2, nodes using array of object? How do you make a force layout json directed graph using dot engine 2, nodes using array of object? This script and codes were developed by Dzulfikar Adi Putra on 06 September 2022, Tuesday.

Force Layout JSON Directed Graph using Dot Engine 2, nodes using array of object Previews

Force Layout JSON Directed Graph using Dot Engine 2, nodes using array of object - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Force Layout JSON Directed Graph using Dot Engine 2, nodes using array of object</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>Force Layout JSON Directed Graph using Dot Engine 2, nodes using array of object </h2>
<div id="content-graph"> </div>
<!-- Button trigger modal -->
<p class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal
</p>
<!-- Modal -->
<div class="modal fade modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> modal body </div> </div> </div>
</div>
<div id="more-info"> List of Nodes : <ul id="nodes"></ul> List of Links : <ul id="links"></ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://d3js.org/d3.v3.min.js'></script>
<script src='https://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js'></script>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Force Layout JSON Directed Graph using Dot Engine 2, nodes using array of object - Script Codes CSS Codes

.node rect { stroke: #333; stroke-width: 1.5px; fill: #fff;	}	.edgeLabel rect { fill: #fff;	}	.edgePath { stroke: #333; stroke-width: 1.5px; fill: none;	}

Force Layout JSON Directed Graph using Dot Engine 2, nodes using array of object - Script Codes JS Codes

/* this is d3js part */
var width=800, height=500;
// Create a new directed graph
var g = new dagreD3.Digraph();
var zoom = d3.behavior.zoom() .scaleExtent([1, 5]) .on("zoom", zoomed);
var drag = d3.behavior.drag() .origin(function(d) { return d; }) .on("dragstart", dragstarted) .on("drag", dragged) .on("dragend", dragended);
var svg = d3.select("#content-graph").append("svg") .attr("width", width) .attr("height", height) .call(zoom);
var container = svg.append("g");
var layout = dagreD3.layout() .nodeSep(20) .rankDir("TB");
var renderer = new dagreD3.Renderer();
d3.json("https://codepen.io/superpikar/pen/LnHgD.js", function(error, graph){
var nodes = graph.mynodes;
var links = graph.arcs;
nodes.forEach(function(node, i){ g.addNode( node.name,{ label: node.name }); $("#nodes").append("<li>"+node.name+"</li>");
});
links.forEach(function(link,i){ g.addEdge(null, link.from, link.to, { label: link.frequency.toString() }); $("#links").append("<li>"+link.from+" to "+link.to+"</li>");
});
var oldDrawNodes = renderer.drawNodes();
renderer.drawNodes(function(graph, root) { var svgNodes = oldDrawNodes(graph, root); svgNodes.attr("id", function(u) { return removeSpecialChar(u); });
return svgNodes;
});
renderer.layout(layout).run(g, d3.select("svg g"));
nodes.forEach(function(node, i){ d3.select("g#"+removeSpecialChar(node.name)) .attr("data-frequency", node.frequency);
});
// display modal on node click
d3.selectAll("g.node") .on("click", function(){ $('#myModal').modal(); var data = $(this).find("g text tspan").text(); var content = $(this).attr("data-frequency"); $('#myModal h4').text(data); $('#myModal .modal-body').text(content); });
});
function removeSpecialChar(theString){ return theString.replace(/[^A-Z0-9]+/ig, "_");
}
function zoomed() { container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
function dragstarted(d) { d3.event.sourceEvent.stopPropagation(); d3.select(this).classed("dragging", true);
}
function dragged(d) { d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}
function dragended(d) { d3.select(this).classed("dragging", false);
}
Force Layout JSON Directed Graph using Dot Engine 2, nodes using array of object - Script Codes
Force Layout JSON Directed Graph using Dot Engine 2, nodes using array of object - Script Codes
Home Page Home
Developer Dzulfikar Adi Putra
Username superpikar
Uploaded September 06, 2022
Rating 3
Size 3,127 Kb
Views 32,384
Do you need developer help for Force Layout JSON Directed Graph using Dot Engine 2, nodes using array of object?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dzulfikar Adi Putra (superpikar) Script Codes
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!