Browse Source

WIP: new map

master
Sebastian Lohff 2 years ago
parent
commit
214f9680c0
  1. 215
      bgpdata/templates/bgpdata/new_new_map.html

215
bgpdata/templates/bgpdata/new_new_map.html

@ -0,0 +1,215 @@ @@ -0,0 +1,215 @@
{% extends "base.html" %}
{% block container_class %}container-fluid{% endblock %}
{% block head %}
{% load static from staticfiles %}
<!-- <script src="{% static "js/d3.js" %}" charset="utf-8"></script> -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
#plotwin {
height: 75vh;
}
</style>
{% endblock %}
{% block body %}
<div class="page-header">
<h3>{% if crawl.pk %}Crawl run {{crawl.pk}}{% else %}Live Crawl {% endif %} from {{crawl.startTime|date:"d.m.Y H:i"}}</h3>
</div>
<div id="plotwin" class="container-fluid"></div>
<!-- <div id="infowin"><div class="alert alert-info" role="alert">Click on a node for more information</div></div> -->
<script type="text/javascript" charset="utf-8">
const margin = {
top: 40,
bottom: 10,
left: 20,
right: 20,
};
let plotwin = document.getElementById("plotwin")
const width = plotwin.offsetWidth - margin.left - margin.right;
const height = plotwin.offsetHeight - margin.top - margin.bottom;
let drag = d3.drag()
.on("drag", dragged);
function dragged() {
let current = d3.select(this);
current
.attr('cx', d3.event.x)
.attr('cy', d3.event.y);
console.log(`${d3.event.x}, ${d3.event.y}`);
}
function dragmove(d) {
let x = d3.event.x;
let y = d3.event.y;
d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
}
const parent_svg = d3
.select("#plotwin")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
//.attr("viewBox", [width / 2, height / 2, width, height])
.attr("viewBox", [0, 0, width, height])
const svg = parent_svg.append("g")
// .append("g")
// .attr("transform", `translate(${margin.left}, ${margin.top})`);
parent_svg.call(
d3.zoom()
.scaleExtent([.1, 4])
.on("zoom", function() { svg.attr("transform", d3.event.transform); })
);
//const simulation = d3
// .forceSimulation()
// .force(
// "link",
// d3.forceLink().id((d) => d.id)
// )
// .force("charge", d3.forceManyBody().distanceMin(50).strength(-300))
// .force("center", d3.forceCenter(width / 2, height / 2));
const color = d3.scaleOrdinal(d3.schemeCategory10);
drag = simulation => {
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
d3.json("/api/v2/crawlrun/live/?with_graph").then((data) => {
// Links data join
data = data.graph
const simulation = d3.forceSimulation(data.nodes)
//.force("link", d3.forceLink(data.links).id(d => d.id).distance(150).strength(1))
//.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("link", d3.forceLink().id(d => d.id)
.distance(l => {
neighs = Math.min(l.source.neighbors, l.target.neighbors);
switch(neighs) {
case 0: return 40;
case 1: return 40;
case 2: return 120;
case 3:
case 4: return 200;
default: return 300;
}
})
.strength(l => {
neighs = Math.min(l.source.neighbors, l.target.neighbors);
return 1 / (neighs);
}))
.force("charge", d3.forceManyBody()
.strength(-200)
.theta(1.1))
//.force("collision", d3.forceCollide(50).strength(0.2).iterations(100))
//.force("collision", d3.forceCollide(40).strength(0.2))
.force("collision", d3.forceCollide(40).strength(0.2))
//.force("x", d3.forceX())
//.force("y", d3.forceY())
.force("center", d3.forceCenter(width / 2, height / 2));
//.force("center", d3.forceRadial(100, width / 2, height / 2));
const link = svg
.selectAll(".link")
.data(data.links)
.join((enter) =>
enter.append("line")
.attr("class", "link"));
// Nodes data join
let node = svg.selectAll('.node')
.data(data.nodes)
.enter()
.append("g")
.attr("id", d => "node-" + d.id)
.call(drag(simulation));
node.append("ellipse")
//.attr("rx", d => d.stub ? 35 : 40)
//.attr("ry", d => d.stub ? 14 : 20)
.attr("rx", d => d.stub ? 34 : (40 + (d.neighbors > 5 ? 5 : 0)))
.attr("ry", d => d.stub ? 12 : (20 + (d.neighbors > 5 ? 2 : 0)))
.attr("fill", function(d) {
if(d.directly_crawled)
return "#94FF70";
else if(!d.online)
return "#FFCCCC";
// return "#F0FFEB";
else if(d.stub)
return "#3291A8"
else
return "#D1FFC2";
})
.attr("stroke", "black")
.attr("stroke-width", "1px");
node.append('text')
.attr("fill", "black")
.attr("font-family", "sans-serif")
.attr("font-size", "13px")
.attr("font-weight", "bold")
.attr("dy", "4")
.attr("text-anchor", "middle")
.text(d => d.id)
simulation.nodes(data.nodes).force("link").links(data.links);
simulation.on("tick", (e) => {
link
.attr("x1", (d) => d.source.x)
.attr("y1", (d) => d.source.y)
.attr("x2", (d) => d.target.x)
.attr("y2", (d) => d.target.y);
node.attr("transform", d => "translate(" + d.x + "," + d.y + ")");
});
});
</script>
{% endblock %}
Loading…
Cancel
Save