topisto/www
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
MEUNIER Thibaud
2018-09-02 09:39:01 +02:00
commit 90ff97c51a
172 changed files with 5686 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
articles/20170315/content.html Normal file
View File

@@ -0,0 +1,207 @@
<div class="container-fluid">
<div class="row">
<div id="dessin" class="col-sm-9">
<svg width="800" height="800">
</div>
<div class="col-sm-3 bg-grey" style="height:800px;overflow-y:scroll">
<div id="controle_dessin" class="col-sm-12">
<input type="hidden" id="node_charge" value="-2">
<input type="hidden" id="link_charge" value="1">
<input type="hidden" id="link_distance" value="25">
<input type="submit" style="width:100%" onclick="javascript:afficherGraphe(le_filtre);" value="Refresh"><br>
<input type="submit" style="width:100%" onclick="javascript:simulation.alphaTarget(0.3).restart();" value="Start"><br>
<input type="submit" style="width:100%" onclick="javascript:simulation.stop();" value="Stop"><br>
<input type="submit" style="width:100%" onclick="javascript:tibo_zoom(80/100);" value="Zoom Out"><br>
<input type="submit" style="width:100%" onclick="javascript:tibo_zoom(100/80);" value="Zoom In"><br>
</div>
<div id="laliste" style="font-family: Klingon"></div>
<div id="utilisateurs" style="font-family: Klingon"></div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
$(window).scroll(function() {
// Smooth scrolling
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
})
</script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var le_filtre = null;
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().strength(node_charge))
.force("center", d3.forceCenter(width / 2, height / 2));
function afficherGraphe(un_filtre)
{
var les_donnees = "d3/data.php";
if (un_filtre != null)
{
les_donnees += '?filtre='+un_filtre;
$("#laliste").html('<a href="javascript:;" onclick="javascript:afficherGraphe(null);">ALL DATA</a><br>');
} else $("#laliste").html('Tout<br>');
le_filtre = un_filtre;
$("#dessin").html('');
$("#dessin").html('<svg width="800" height="800">');
$("#utilisateurs").html('');
svg = d3.select("svg");
d3.json(les_donnees, function(error, graph) {
if (error) throw error;
d3.selectAll(graph.nodes)
.each(function(d, i) {
{graph.nodes[i].x = width/2; graph.nodes[i].y = height/2;};
//if (graph.nodes[i].group == 5976)
if ((graph.nodes[i].group < 10000) && (graph.nodes[i].group != 5237))
{
if (un_filtre != graph.nodes[i].id)
$("#laliste").append('<a href="javascript:;" onclick="javascript:afficherGraphe('+graph.nodes[i].id+');">'+graph.nodes[i].label+'</a><br>');
else
$("#laliste").append(graph.nodes[i].label+'<br>');
}
if (graph.nodes[i].group > 10000)
{
// $("#utilisateurs").append(graph.nodes[i].label+'<br>');
if (un_filtre != graph.nodes[i].id)
$("#utilisateurs").append('<a href="javascript:;" onclick="javascript:afficherGraphe('+graph.nodes[i].id+');">'+graph.nodes[i].label+'</a><br>');
else
$("#utilisateurs").append(graph.nodes[i].label+'<br>');
}
});
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", 5)
.attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
node.append("title")
.text(function(d) { return d.label; });
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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
});
}
function node_charge(d)
{
return $("#node_charge").val();
}
var zoom_scale = 1;
function tibo_zoom(valeur)
{
var N1 = 0;
var X1 = 0;
var Y1 = 0;
d3.selectAll('circle').each(function(d,i){
var elt = d3.select(this);
N1 += 1;
tmp = elt.attr("cx");
X1 += parseFloat(elt.attr("cx"));
Y1 += parseFloat(elt.attr("cy"));
});
zoom_scale *= valeur;
tx = X1 / N1;
ty = Y1 / N1;
svg.transition().duration(500).attr('transform','translate('+tx+' '+ty+') scale('+zoom_scale+')');
}
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;
}
afficherGraphe(10001);
</script>