first commit
This commit is contained in:
207
articles/20170315/content.html
Normal file
207
articles/20170315/content.html
Normal 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>
|
||||
|
||||
17
articles/20170315/header.html
Normal file
17
articles/20170315/header.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<div class="container-fluid bg-grey">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<br><img src="articles/ARTICLE/images/D3-force-driven-graph.png" width="100%; height: auto"></img>
|
||||
<br><p>ARTICLE</p>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<h2>Exploring D3 force driven graphs</h2>
|
||||
<h4>This the Klingon starfleet organisation</h4>
|
||||
<p>Not really finished ...</p>
|
||||
<p class="text-justify" style="font-family: Klingon">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
####BUTTON####
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
BIN
articles/20170315/images/D3-force-driven-graph.png
Normal file
BIN
articles/20170315/images/D3-force-driven-graph.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
12
articles/20170315/styles.html
Normal file
12
articles/20170315/styles.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<link href="ARTICLE/js/vis-4.18.1/dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
|
||||
<style>
|
||||
.links line {
|
||||
stroke: #999;
|
||||
stroke-opacity: 0.6;
|
||||
}
|
||||
|
||||
.nodes circle {
|
||||
stroke: #fff;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user