ArbreEMS

Clique sur une case ou un lien pour le mettre en valeur.

Dans notre cas cela permet de montrer le chemin de résolution qui à le plus de vote positif (nénmoins il faudrait un nombre minimum de votants par rapport aux nombre de participant.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

<title>Collapsible Tree Example</title>

<style>

.node rect {
	  fill: #fff;
	  stroke: #ccc;
	  stroke-width: 8px;
	}

.node text { fill: white; font: 20px bold sans-serif; }

.link {
	  fill: none;
	  stroke: #ccc;
	  stroke-width: 8px;
	}
	
    </style>
 
<script src="https://d3js.org/d3.v3.min.js"></script>
  </head>

<body>

var treeData = [
  {
    "name": "Top Level",
    "parent": "null",
    "children": [
      {
        "name": "Level 2: A",
        "parent": "Top Level",
        "children": [
          {
            "name": "Son of A",
            "parent": "Level 2: A"
          },
          {
            "name": "Daughter of A",
            "parent": "Level 2: A"
          }
        ]
      },
      {
        "name": "Level 2: A",
        "parent": "Top Level",
        "children": [
          {
            "name": "Son of A",
            "parent": "Level 2: A"
          },
          {
            "name": "Level 2: A",
        "parent": "Top Level",
          }
        ]

}
    ]
  }
];

// ************** Generate the tree diagram	 *****************
var margin = {top: 100, right: 120, bottom: 20, left: 120},
	width = 1960 - margin.right - margin.left,
	height = 1500 - margin.top - margin.bottom;
	
var i = 0;

var tree = d3.layout.tree()
	.size([height, width]);

var diagonal = d3.svg.diagonal()
	.projection(function(d) { return [d.x, d.y]; });

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 + ")");

root = treeData[0];
  
update(root);

function update(source) {

// Compute the new tree layout.
  var nodes = tree.nodes(source),
	  links = tree.links(nodes);

// Normalize for fixed-depth.
 nodes.forEach(function(d) { 
    d.y = d.depth * 180; 
  });

// Declare the nodesâ€¦
  var node = svg.selectAll("g.node")
	  .data(nodes, function(d) { console.log(d.id); return d.id || (d.id = ++i); });

// Enter the nodes.
  var nodeEnter = node.enter().append("g")
	  .attr("class", "node")
	  .attr("transform", function(d) { 
		  return "translate(" + d.x + "," + d.y  + ")"; });

nodeEnter.append("rect")
	  .attr("width", 80)
    .attr("height", 80 )
    .attr('transform', 'translate('+ -40 + ','+ -40 + ')')
	  .style("fill", function (d) {
      if (d.depth == 0) {
        return "black";
      }
      else if (d.depth % 2 == 0)
      {
        return "#d62728";
      }
      else
      {
        return "#1f77b4";
      }

});

nodeEnter.append("text")
  .text(function  (d) {
     if (d.depth == 0) {
        return "E";
      }
      else if (d.depth % 2 == 1)
      {
        return "M";
      }
      else
      {
        return "S";
      }
  });

// Declare the linksâ€¦
  var link = svg.selectAll("path.link")
	  .data(links, function(d) { return d.target.id; });

// Enter the links.
  link.enter().insert("path", "g")
	  .attr("class", "link")
	  .attr("d", diagonal);

//On click
  d3.selectAll("path").on("click",function  (d) {
    
    d3.select(this).style('stroke', '#DAA520')
                   .style('stroke-width', '10');
  });

d3.selectAll("rect").on("click",function  () {
    d3.select(this).style('stroke', '#DAA520')
                   .style('stroke-width', '10');
  });
}

</script>
	
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js