WIP: new map
This commit is contained in:
parent
bbf4061292
commit
214f9680c0
|
@ -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…
Reference in New Issue