r2c/user/themes/r2c/js/script_d3js.js

    var $container = $('#links');
    

      var width = $container.outerWidth(true);
      var height = $container.outerHeight(true);
      var svg = d3.select("#links svg");
      Addwidth = svg.attr("width", '100%'),
      Addheight = svg.attr("height", '100%');

  var color = d3.scaleOrdinal(d3.schemeCategory20);

  var simulation = d3.forceSimulation()
      .force("link", d3.forceLink().distance(20).id(function(d) { return d.id; }))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width + (width /2)- 20, height + (height/2) - 30));

  d3.json("user/themes/r2c/json/miserables.json", function(error, graph) {
    if (error) throw error;

    var link = svg.append("g")
      .attr("class", "links")
      // .attr("left", "auto")
      .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("text")
        .data(graph.nodes)
        .enter().append("text")
        .text(function(d) { return d.id; })
        // .attr("fill", function(d) { return color(); })
        .attr("class",function(d) { return "group" + d.group ;})
        .attr("id",function(d) { return d.identifiant; })
        .attr("href",function(d) { return d.cible; })
        .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));

    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("x", function(d) { return d.x; })
          .attr("y", function(d) { return d.y; });
    }
  });

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