Actions

Plan d'étude interactif : Différence entre versions

De erg

(PLAN D'ETUDE INTERACTIF)
 
(2 révisions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
<syntaxhighlight lang="javascript" line>
 
var margin = {top: 20, right: 120, bottom: 20, left: 120};
 
var width = 1000;
 
var height = 700;
 
  
var i = 0,
+
== Github ==
    duration = 750,
 
    root;
 
  
var tree = d3.layout.tree()
+
Toutes les informations relatives au projet (code source / todo list) sont disponibles sur le Github du projet : https://github.com/antoine1000/erg-dendrogram
    .size([height, width]);
 
    /*.size([360, width / 2 - 120]);*/
 
 
 
var diagonal = d3.svg.diagonal()
 
    .projection(function(d) { return [d.y, d.x]; });
 
 
 
var svg = d3.select("body").append("svg")
 
    .attr("width", width + margin.right + margin.left)
 
    .attr("height", height + margin.top + margin.bottom)
 
  .append("g")
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
 
 
// Import lightbox
 
var lightbox;
 
 
 
d3.json("erg.json", function(error, flare) {
 
  if (error) throw error;
 
 
 
  root = flare;
 
  root.x0 = height / 2;
 
  root.y0 = 0;
 
 
 
  function collapse(d) {
 
    if (d.children) {
 
      d._children = d.children;
 
      d._children.forEach(collapse);
 
      d.children = null;
 
    }
 
  }
 
 
 
  root.children.forEach(collapse);
 
  update(root);
 
});
 
 
 
d3.select(self.frameElement).style("height", "800px");
 
 
 
function update(source) {
 
 
 
  // Compute the new tree layout.
 
  var nodes = tree.nodes(root).reverse(),
 
      links = tree.links(nodes);
 
 
 
  // Normalize for fixed-depth.
 
  nodes.forEach(function(d) { d.y = d.depth * 180; });
 
 
 
  // Update the nodes…
 
  var node = svg.selectAll("g.node")
 
      .data(nodes, function(d) { return d.id || (d.id = ++i); });
 
 
 
 
 
  // Enter any new nodes at the parent's previous position.
 
  var nodeEnter = node.enter().append("g")
 
      .attr("class", "node")
 
      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
 
      /*.attr("transform", function(d) { return "translate(" + project(d.x, d.y) + ")"; })*/
 
      .on("click", click);
 
 
 
 
 
  nodeEnter.append("circle")
 
      .attr("r", 1e-6)
 
      //open lightbox when a node has link and is clicked
 
      .on("click", function (d) {
 
        console.log('click! / this =', this, '/ d =', d);
 
        //open lightbox
 
        if(d.link){
 
            d3.event.preventDefault();
 
            lightbox = lity(d.link);
 
          }
 
        // d3
 
          /*d3.selectAll("circle").filter(function (cd) {return cd == d.parent }).classed('active', true);*/
 
          activate(this, d);
 
        })
 
 
 
  nodeEnter.append("text")
 
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
 
      .attr("dy", ".35em")
 
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
 
      .text(function(d) { return d.name; })
 
      .style("fill-opacity", 1e-6);
 
 
 
  // Transition nodes to their new position.
 
  node.classed("leaf", function(d) { return !d._children; });
 
  var nodeUpdate = node.transition()
 
      .duration(duration)
 
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
 
 
 
  nodeUpdate.select("circle")
 
      .attr("r", 4.5);
 
     
 
 
 
  nodeUpdate.select("text")
 
      .style("fill-opacity", 1);
 
 
 
  // Transition exiting nodes to the parent's new position.
 
  var nodeExit = node.exit().transition()
 
      .duration(duration)
 
      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
 
      .remove();
 
 
 
  nodeExit.select("circle")
 
      .attr("r", 1e-6);
 
 
 
  nodeExit.select("text")
 
      .style("fill-opacity", 1e-6);
 
 
 
  // Update the links…
 
  var link = svg.selectAll("path.link")
 
      .data(links, function(d) { return d.target.id; });
 
 
 
  // Enter any new links at the parent's previous position.
 
  link.enter().insert("path", "g")
 
      .attr("class", "link")
 
      .attr("d", function(d) {
 
        var o = {x: source.x0, y: source.y0};
 
        return diagonal({source: o, target: o});
 
      });
 
      /*.attr("d", function(d) {
 
        return "M" + project(d.x, d.y)
 
            + "C" + project(d.x, (d.y + d.parent.y) / 2)
 
            + " " + project(d.parent.x, (d.y + d.parent.y) / 2)
 
            + " " + project(d.parent.x, d.parent.y);
 
      });*/
 
 
 
  // Transition links to their new position.
 
  link.transition()
 
      .duration(duration)
 
      .attr("d", diagonal);
 
 
 
  // Transition exiting nodes to the parent's new position.
 
  link.exit().transition()
 
      .duration(duration)
 
      .attr("d", function(d) {
 
        var o = {x: source.x, y: source.y};
 
        return diagonal({source: o, target: o});
 
      })
 
      .remove();
 
 
 
  // Stash the old positions for transition.
 
  nodes.forEach(function(d) {
 
    d.x0 = d.x;
 
    d.y0 = d.y;
 
  });
 
}
 
 
 
// Toggle children on click.
 
function click(d) {
 
  if (d.children) {
 
    d._children = d.children;
 
    d.children = null;
 
  } else {
 
    d.children = d._children;
 
    d._children = null;
 
  }
 
  update(d);
 
}
 
 
 
 
 
function project(x, y) {
 
  var angle = (x - 90) / 180 * Math.PI, radius = y;
 
  return [radius * Math.cos(angle), radius * Math.sin(angle)];
 
}
 
 
 
 
 
function activate(elt, d, noclear) {
 
  // Clear all active classes
 
  if(noclear == undefined) {
 
    d3.selectAll("circle.active").classed("active", false);
 
    d3.selectAll("path.link").classed("active", false);
 
  }
 
  // Add active class to elements
 
    d3.select(elt).classed("active", true);
 
    console.log('need to activate', d.parent);
 
   
 
    d3.selectAll("circle").each(function (cd) {
 
      if(cd == d.parent){
 
        activate(this, cd, true);
 
        d3.select(this).classed('active', true);
 
      }
 
    // give "active" class to path between clicked node
 
    d3.selectAll("path.link").each(function (cd){
 
      if(cd.target == d){
 
        d3.select(this).classed('active', true);
 
      }
 
    })
 
  });
 
}
 
 
 
</syntaxhighlight>
 

Version actuelle datée du 13 juillet 2017 à 14:47

Github

Toutes les informations relatives au projet (code source / todo list) sont disponibles sur le Github du projet : https://github.com/antoine1000/erg-dendrogram