discarn8 · March 22, 2022 05:06
diff --git a/d3-diagram.html b/d3-diagram.html
 d3-diagram.html
 --------------------------------------------------------------------
 <!DOCTYPE html>
 <meta charset="utf-8">
 <head>
 <style>
    body {font-family: 'Arial';
    background: #000000;}
 </style>
 <svg width="960" height="600"></svg>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script>

 var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

 var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody().strength(-4600))
    .force("center", d3.forceCenter(width / 2, height / 2));


 d3.json("data.json", function(error, graph) {
  if (error) throw error;
  
  graph.links.forEach(function(d){
    d.source = d.source_id;    
    d.target = d.target_id;
  });           

  var link = svg.append("g")
                .style("stroke", "#0F0")
                .selectAll("line")
                .data(graph.links)
                .enter().append("line");

  var node = svg.append("g")
            .attr("class", "nodes")
  .selectAll("circle")
            .data(graph.nodes)
  .enter().append("circle")
          .attr("r", 6)
          .call(d3.drag()
              .on("start", dragstarted)
              .on("drag", dragged)
              .on("end", dragended));
  
  var label = svg.append("g")
      .attr("class", "labels")
      .selectAll("text")
      .data(graph.nodes)
      .enter().append("text")
        .attr("class", "label")
        .text(function(d) { return d.name; });

  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(graph.links);

  function ticked() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node
         .attr("r", 40)
         .style("fill", "#000000")
         .style("stroke", "#0000FF")
         .style("stroke-width", "1px")
         .attr("cx", function(d) { return d.x+20; })
         .attr("cy", function(d) { return d.y-6; });
    
    label
    	    .attr("x", function(d) { return d.x; })
            .attr("y", function(d) { return d.y; })
            .style("font-size", "12px").style("fill","#00FF00");
  }
 });

 function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart()
  simulation.fix(d);
 }

 function dragged(d) {
  simulation.fix(d, d3.event.x, d3.event.y);
 }

 function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  simulation.unfix(d);
 }

 </script>
 </html>
diff --git a/data.json b/data.json
 {
  "nodes": [
    {
      "id": 1,
      "name": "PiHole"
    },
    {
      "id": 2,
      "name": "Grafana"
    },
    {
      "id": 3,
      "name": "Zabbix"
    },
    {
      "id": 4,
      "name": "Nagios"
    },
    {
      "id": 5,
      "name": "FTP"
    },
    {
      "id": 6,
      "name": "PfSense"
    },
    {
      "id": 7,
      "name": "OMV"
    },
    {
      "id": 8,
      "name": "Therm"
    },
    {
      "id": 9,
      "name": "Internet"
    },
    {
      "id": 10,
      "name": "Switch"
    }
  ],
  "links": [

    {
      "source_id": 1,
      "target_id": 10
    },
    {
      "source_id": 10,
      "target_id": 2
    },
    {
      "source_id": 10,
      "target_id": 3
    },
    {
      "source_id": 10,
      "target_id": 4
    },
    {
      "source_id": 10,
      "target_id": 5
    },
    {
      "source_id": 10,
      "target_id": 6
    },
    {
      "source_id": 10,
      "target_id": 7
    },
    {
      "source_id": 10,
      "target_id": 8
    },
    {
      "source_id": 6,
      "target_id": 9
    }
  ]
 }
	d3-diagram.html
	--------------------------------------------------------------------
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<style>
	body {font-family: 'Arial';
	background: #000000;}
	</style>
	<svg width="960" height="600"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height");

	var simulation = d3.forceSimulation()
	.force("link", d3.forceLink().id(function(d) { return d.id; }))
	.force("charge", d3.forceManyBody().strength(-4600))
	.force("center", d3.forceCenter(width / 2, height / 2));


	d3.json("data.json", function(error, graph) {
	if (error) throw error;

	graph.links.forEach(function(d){
	d.source = d.source_id;
	d.target = d.target_id;
	});

	var link = svg.append("g")
	.style("stroke", "#0F0")
	.selectAll("line")
	.data(graph.links)
	.enter().append("line");

	var node = svg.append("g")
	.attr("class", "nodes")
	.selectAll("circle")
	.data(graph.nodes)
	.enter().append("circle")
	.attr("r", 6)
	.call(d3.drag()
	.on("start", dragstarted)
	.on("drag", dragged)
	.on("end", dragended));

	var label = svg.append("g")
	.attr("class", "labels")
	.selectAll("text")
	.data(graph.nodes)
	.enter().append("text")
	.attr("class", "label")
	.text(function(d) { return d.name; });

	simulation
	.nodes(graph.nodes)
	.on("tick", ticked);

	simulation.force("link")
	.links(graph.links);

	function ticked() {
	link
	.attr("x1", function(d) { return d.source.x; })
	.attr("y1", function(d) { return d.source.y; })
	.attr("x2", function(d) { return d.target.x; })
	.attr("y2", function(d) { return d.target.y; });

	node
	.attr("r", 40)
	.style("fill", "#000000")
	.style("stroke", "#0000FF")
	.style("stroke-width", "1px")
	.attr("cx", function(d) { return d.x+20; })
	.attr("cy", function(d) { return d.y-6; });

	label
	.attr("x", function(d) { return d.x; })
	.attr("y", function(d) { return d.y; })
	.style("font-size", "12px").style("fill","#00FF00");
	}
	});

	function dragstarted(d) {
	if (!d3.event.active) simulation.alphaTarget(0.3).restart()
	simulation.fix(d);
	}

	function dragged(d) {
	simulation.fix(d, d3.event.x, d3.event.y);
	}

	function dragended(d) {
	if (!d3.event.active) simulation.alphaTarget(0);
	simulation.unfix(d);
	}

	</script>
	</html>
	{
	"nodes": [
	{
	"id": 1,
	"name": "PiHole"
	},
	{
	"id": 2,
	"name": "Grafana"
	},
	{
	"id": 3,
	"name": "Zabbix"
	},
	{
	"id": 4,
	"name": "Nagios"
	},
	{
	"id": 5,
	"name": "FTP"
	},
	{
	"id": 6,
	"name": "PfSense"
	},
	{
	"id": 7,
	"name": "OMV"
	},
	{
	"id": 8,
	"name": "Therm"
	},
	{
	"id": 9,
	"name": "Internet"
	},
	{
	"id": 10,
	"name": "Switch"
	}
	],
	"links": [

	{
	"source_id": 1,
	"target_id": 10
	},
	{
	"source_id": 10,
	"target_id": 2
	},
	{
	"source_id": 10,
	"target_id": 3
	},
	{
	"source_id": 10,
	"target_id": 4
	},
	{
	"source_id": 10,
	"target_id": 5
	},
	{
	"source_id": 10,
	"target_id": 6
	},
	{
	"source_id": 10,
	"target_id": 7
	},
	{
	"source_id": 10,
	"target_id": 8
	},
	{
	"source_id": 6,
	"target_id": 9
	}
	]
	}