<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>