• <fieldset>
• <legend>Récupérez votre code !</legend>
• <span id="erreur_res"></span>
  • <span id="resultat_res"></span>
  • <a class="button" href="#source-code" id="view-source">Code Source</a>
  • <div id="source-code">
    • <a href="#" id="x"><img src="http://css-tricks.com/examples/ViewSourceButton/images/x.png" alt="close"></a>
    • </div>
• </fieldset>
• </center>
• </div>

= Imports Scripts pour d3 js

-->

• $(document).foundation();

• var $erreur = $('#erreur'),
  • $resultat = $('#resultat'),
  • $erreur_donnees = $('#erreur_donnees'),
  • $resultat_donnees = $('#resultat_donnees'),
  • $erreur_txt = $('#erreur_txt'),
  • $resultat_txt = $('#resultat_txt'),
  • $test_co = $('#test_connexion'),
  • $valider = $('#valider_donnees'),
  • $bt_plus = $('.add'),
  • $valid_constel = $('#valider_constellation'),
  • $bt_moins = $('.del'),
  • $bd_hote = $('#bd_hote'),
  • $bd_nom = $('#bd_nom'),
  • $bd_user = $('#bd_user'),
  • $champ = $('.champ'),
  • $btn_radio = $('.type_rel'),
  • $chk_box = $('.type_niv'),
  • $btn_txt = $('#valide_txt'),
  • $btn_add_champ = $('.add_champ'),
  • $btn_del_champ = $('.del_champ'),
  • $bd_pswd = $('#bd_pswd');

affichage du formulaire adéquat selon la source de données choisie dans la liste déroulante

• $('#formgene-etape3').slideUp();
• $('#formgene-etapefinale').slideUp();
• $('#div_constellation').slideUp();
• $('html, body').animate({
  • scrollTop: $("#formgene").offset().top
• }, 1000);

){ $('#formgene-etape1').slideUp(); $('#formgene-txt').slideUp(); } else if ($(this).val()==="mysql"){ $('#formgene-txt').slideUp(); $('#formgene-etape1').slideDown(); } else if($(this).val()==="txt"){ $('#formgene-etape1').slideUp(); $('#formgene-txt').slideDown(); } }); // ========================================================================== // Changement de la couleur des cercles feuilles de la constellation par rapport au choix de la palette // A COMPLETER /*$('#feuille_couleur').change(function() { var couleur = this.value; })*/ // ======= GESTION DE L'AJOUT DE CHAMPS SUPPLEMENTAIRES POUR LES CERCLES FEUILLES ======== // la fonction récupère l'id du bouton cliqué pour ajouter des champs à la table correspondante $btn_add_champ.click(function(e){ var el = e.target||event.srcElement; var id = el.id; if(id=="btn_add_champ2"){ var scntDiv = $('#p_scents2'); var i = $('#p_scents2 p').size() + 1; $('

}

else if(id

• var scntDiv = $('#p_scents3');
• var i = $('#p_scents3 p').size() + 1;
• $('<p><label for="p_scnts"><input type="text" id="p_scnt3_'+i+'" size="20" name="p_scnt_' + i +'" value= placeholder="Champ supplémentaire" />
  ').appendTo(scntDiv); } else if(id=="btn_add_champ4"){ var scntDiv = $('#p_scents4'); var i = $('#p_scents4 p').size() + 1; $('

= GESTION DE SUPPRESSION DE CHAMPS SUPPLEMENTAIRES POUR LES CERCLES FEUILLES

• var el = e.target||event.srcElement;
• var id = el.id;
• if(id"btn_del_champ2"){
  • var i = $('#p_scents2 p').size();
  • $('#p_scnt2_'+i).parents('p').remove();

"btn_del_champ3"){

• var i = $('#p_scents3 p').size();
• $('#p_scnt3_'+i).parents('p').remove();

• var i = $('#p_scents4 p').size();
  • $('#p_scnt4_'+i).parents('p').remove();

• var el = e.target||event.srcElement;
• var id = el.id;
• if(id

  "radioniv2_un"){

  • $('#formniv2_plusieurs').slideUp();
  • $('#formniv2_un').slideDown();

• }
• else if(id"radioniv2_plusieurs"){
  • $('#formniv2_un').slideUp();
  • $('#formniv2_plusieurs').slideDown();
• }
• else if(id

  "radioniv3_un"){

  • $('#formniv3_plusieurs').slideUp();
  • $('#formniv3_un').slideDown();

• }
• else if(id"radioniv3_plusieurs"){
  • $('#formniv3_un').slideUp();
  • $('#formniv3_plusieurs').slideDown();
• }
• else if(id

  "radioniv4_un"){

  • $('#formniv4_plusieurs').slideUp();
  • $('#formniv4_un').slideDown();

• }
• else if(id"radioniv4_plusieurs"){
  • $('#formniv4_un').slideUp();
  • $('#formniv4_plusieurs').slideDown();
• }

• var el = e.target||event.srcElement;
• var id = el.id;
• if(id

  "chbx_niv2"){

  • if($('#chbx_niv2').is(':checked')){
    • $('#disp_btn2').slideDown();
    • $('#btn_plus2').attr("disabled", true);
    • $('#btn_moins2').attr("disabled", true);
  • }
  • else{
    • $('#disp_btn2').slideUp();
    • $('#btn_plus2').attr("disabled", false);
    • $('#btn_moins2').attr("disabled", false);
    • var s = $('#p_scents2 p').size();
    • for(var i=0; i<=s; i++){
      • $('#p_scnt2_'+i).parents('p').remove();
    • }
  • }

• }
• else if(id"chbx_niv3"){
  • if($('#chbx_niv3').is(':checked')){
    • $('#disp_btn3').slideDown();
    • $('#btn_plus3').attr("disabled", true);
    • $('#btn_moins3').attr("disabled", true);
  • }
  • else{
    • $('#disp_btn3').slideUp();
    • $('#btn_plus3').attr("disabled", false);
    • $('#btn_moins3').attr("disabled", false);
    • var s = $('#p_scents3 p').size();
    • for(var i=0; i<=s; i++){
      • $('#p_scnt3_'+i).parents('p').remove();
    • }
  • }
• }
• else if(id

  "chbx_niv4"){

  • if($('#chbx_niv4').is(':checked')){
    • $('#disp_btn4').slideDown();
    • $('#btn_plus4').attr("disabled", true);
    • $('#btn_moins4').attr("disabled", true);
  • }
  • else{
    • $('#disp_btn4').slideUp();
    • $('#btn_plus4').attr("disabled", false);
    • $('#btn_moins4').attr("disabled", false);
    • var s = $('#p_scents4 p').size();
    • for(var i=0; i<=s; i++){
      • $('#p_scnt4_'+i).parents('p').remove();
    • }
  • }

• }

• $(this).css({
  • borderColor:'#cccccc' on remet la couleur de bordure initiale si elle avait été changée
• })

• var el = e.target||event.srcElement;
• var id = el.id;
• if(id "btn_plus1"){
  • $('html, body').animate({
  • scrollTop: $("#formgene-etape2").offset().top
  • }, 1000);
• $('#formniv2').slideDown();
• $('#btn_plus1').hide();

"btn_plus2"){

• $('html, body').animate({
• scrollTop: $("#formniv2").offset().top
• }, 1000);

• $('html, body').animate({
• scrollTop: $("#formniv3").offset().top
• }, 1000);

• var el = e.target||event.srcElement;
• var id = el.id;
• if(id

  "btn_moins2"){

  • $('html, body').animate({
  • scrollTop: $("#formgene-etape2").offset().top
  • }, 1000);

• $('#formniv2').slideUp();
• $('#niv2').val(); $('#idniv2').val();
• $('#titreniv2').val(); $('#tablerelniv2').val();
• $('#tableid1relniv2').val(); $('#tableid2relniv2').val();
• $('#idrelniv2').val(); $('#radioniv2_un').attr("checked",false); $('#radioniv2_plusieurs').attr("checked",false); $('#btn_plus1').show(); $('#btn_moins1').show(); $('#est_feuille1').slideDown(); } else if(id =="btn_moins3"){ $('html, body').animate({ scrollTop: $("#formniv3").offset().top }, 1000); $('#formniv3').slideUp(); $('#niv3').val();
• $('#idniv3').val(); $('#titreniv3').val();
• $('#tablerelniv3').val(); $('#tableid1relniv3').val();
• $('#tableid2relniv3').val(); $('#idrelniv3').val();
• $('#radioniv3_un').attr("checked",false);
• $('#radioniv3_plusieurs').attr("checked",false);
• $('#btn_plus2').show();
• $('#btn_moins2').show();
• $('#est_feuille2').slideDown();
• }
• else if(id "btn_moins4"){
  • $('html, body').animate({
  • scrollTop: $("#formniv4").offset().top
  • }, 1000);
• $('#formniv4').slideUp();
• $('#niv4').val(); $('#idniv4').val();
• $('#titreniv4').val(); $('#tablerelniv4').val();
• $('#tableid1relniv4').val(); $('#tableid2relniv4').val();
• $('#idrelniv4').val(); $('#radioniv4_un').attr("checked",false); $('#radioniv4_plusieurs').attr("checked",false); $('#btn_plus3').show(); $('#btn_moins3').show(); $('#est_feuille3').slideDown(); } }) // ============================================================================================ // ======================= Lorsque je soumets le fichier .txt ================================== $('input[type="file"]').change(function(a){ // lecture du fichier var reader = new FileReader(); reader.onload = function(e) { var text = e.target.result; var lines = text.split("\n"); var pile = [] // reconstruction du JSON var addToArray = function(t, path) { var item = path.slice(-1)[0] //Dernier element, on l'insere dans t[...path] let r = t for (var i = 0; i < path.length - 1; i++) { r = r.children.find(function(c) { return c.name === path[i] }) } r.children.push({ name: item, children: [] }) } var depth = 0 var pile = [] var data = { name: "root", children: [] } lines.forEach(function(line) { var title = line.replace(/\t/g, );
  • var nTab = line.length - title.length;
  • var diff = nTab - pile.length
  • for (var i = diff; i <= 0; i++) {
    • pile.pop()
  • }
  • pile.push(title)
  • addToArray(data, pile.slice())
  • })
  • renderConstellation(data)
    • }
    • reader.readAsText(a.target.files[0]);
• });

• e.preventDefault();
• $erreur.css('display','none');
• $resultat.css('display','none');
• var champ = $('.champ');
• champ.css({
  • borderColor:'#cccccc'
• });
• Vérification que les champs adéquats sont bien remplis
• var src = $('#type_bd option:selected').val();
• var b_hote = verifier($bd_hote, "test_co");
• var b_bdnom = verifier($bd_nom, "test_co");
• var b_user = verifier($bd_user, "test_co");

• $.post(
  • 'traitement_generateur.php',
  • {
    • envoi des données
    • source : src,
    • hote : $bd_hote.val(),
    • bdname : $bd_nom.val(),
    • bduser : $bd_user.val(),
    • bdpswd : $bd_pswd.val(),
    • bouton : "btn_connexion"
  • },
  • function(data){
    • if(data "Success"){ connexion réussie
      • $resultat.html("<p>La connexion avec votre base de données a été établie avec succès !</p>");
      • $resultat.css('display','block');
      • le formulaire de connexion à la base ne peut plus être changé
      • $("#bd_hote").attr('disabled','disabled');
      • $("#bd_nom").attr('disabled','disabled');
      • $("#bd_user").attr('disabled','disabled');
      • $("#bd_pswd").attr('disabled','disabled');
      • $(test_connexion).attr("disabled", true);
      • $("#type_bd").attr('disabled','disabled');
      • $('html, body').animate({
        • scrollTop: $("#formgene").offset().top}, 1000);
          • $('#formgene-etape2').slideUp();
          • $('#formgene-etape2').slideDown();
    • }
    • else { erreur avec la connexion
      • $erreur.html("<p>Un problème est survenu lors de la connexion. Veuillez vérifier vos informations de connexion. <br> "+data+"</p>");
      • $erreur.css('display','block');
    • }
  • },
  • 'text' Format des données reçues
• );

Lorsque je soumets les données afin de générer la constellation

• e.preventDefault();

• b_niv3 = false,
• b_niv4 = false,
• dataOk = false;
• nb_niv = 1; contrôle le nombre de niveaux (profondeur) au niveau du JSON

• borderColor:'#cccccc'
• });
• Vérification que les champs sont bien remplis (vérification partielle) + détermine la profondeur
• A compléter avec la vérification de tous les champs
• var src = $('#type_bd option:selected').val();
• var b_sphere0 = verifier($('#niv0'), "valider_donnees");
• var b_sphere1 = verifier($('#niv1'), "valider_donnees");
• var b_id1 = verifier($('#idniv1'), "valider_donnees");
• var b_titre1 = verifier($('#titreniv1'), "valider_donnees");
• if($('#formniv2').css('display') != 'none'){
  • b_niv2 = true;
• var b_sphere2 = verifier($('#niv2'), "valider_donnees");
  • var b_id2 = verifier($('#idniv2'), "valider_donnees");
  • var b_titre2 = verifier($('#titreniv2'), "valider_donnees");
  • nb_niv = 2;
  • feuille = $('#p_scents2 p');
  • feuille = '#p_scents2';
  • if($('#formniv3').css('display') != 'none'){
    • b_niv3 = true;
    • var b_sphere3 = verifier($('#niv3'), "valider_donnees");
    • var b_id3 = verifier($('#idniv3'), "valider_donnees");
    • var b_titre3 = verifier($('#titreniv3'), "valider_donnees");
    • nb_niv = 3;
    • feuille = $('#p_scents3 p');
    • feuille = '#p_scents3';
    • if($('#formniv4').css('display') != 'none'){
      • b_niv4 = true;
        • var b_sphere4 = verifier($('#niv4'), "valider_donnees");
      • var b_id4 = verifier($('#idniv4'), "valider_donnees");
      • var b_titre4 = verifier($('#titreniv4'), "valider_donnees");
      • nb_niv = 4;
      • feuille = $('#p_scents4 p');
      • feuille = '#p_scents4';
      • }
  • }
• }
• var nb_champs = count_champ(feuille);

• if(!b_niv2){
• dataOk = true;
• }
• else {
  • if(b_sphere2 && b_id2 && b_titre2){
    • if(!b_niv3){
      • dataOk = true;
    • }
    • else{
      • if(b_sphere3 && b_id3 && b_titre3){
        • if(!b_niv4){
          • dataOk = true;
        • }
        • else{
          • if(b_sphere4 && b_id4 && b_titre4){
            • dataOk = true;
          • }
        • }
      • }
    • }
  • }
• }
• }

• $.post(
  • 'traitement_generateur.php',
  • {

    • = envoi des données récupérées dans tous les champs
      A Compléter avec les champs supplémentaires ajoutés
    • bouton : "btn_validation",
    • source : src,
  • hote : $bd_hote.val(),
  • bdname : $bd_nom.val(),
  • bduser : $bd_user.val(),
  • bdpswd : $bd_pswd.val(),
    • nom_root : $("#niv0").val(),
    • nom_sphere_1 : $('#niv1').val(),
    • id_sphere_1 : $('#idniv1').val(),
    • titre_sphere_1 : $('#titreniv1').val(),
    • nom_sphere_2 : $('#niv2').val(),
    • id_sphere_2 : $('#idniv2').val(),
    • titre_sphere_2 : $('#titreniv2').val(),
    • nom_sphere_3 : $('#niv3').val(),
    • id_sphere_3 : $('#idniv3').val(),
    • titre_sphere_3 : $('#titreniv3').val(),
    • nom_sphere_4 : $('#niv4').val(),
    • id_sphere_4 : $('#idniv4').val(),
    • titre_sphere_4 : $('#titreniv4').val(),
    • nom_relation_2 : $('#tablerelniv2').val(), relation n..n
  • id1_relation_2 : $('#tableid1relniv2').val(), relation n..n
  • id2_relation_2 : $('#tableid2relniv2').val(), relation n..n
  • id_relation_2 : $('#idrelniv2').val(), relation 1..n
  • nom_relation_3 : $('#tablerelniv3').val(), relation n..n
  • id1_relation_3 : $('#tableid1relniv3').val(), relation n..n
  • id2_relation_3 : $('#tableid2relniv3').val(), relation n..n
  • id_relation_3 : $('#idrelniv3').val(), relation 1..n
  • nom_relation_4 : $('#tablerelniv4').val(), relation n..n
  • id1_relation_4 : $('#tableid1relniv4').val(), relation n..n
  • id2_relation_4 : $('#tableid2relniv4').val(), relation n..n
  • id_relation_4 : $('#idrelniv4').val(), relation 1..n
  • nombre_niveau : nb_niv
  • },
  • function(data){
    • retour succès avec affichage de la constellation
    • à compléter avec un retour erreur
    • $resultat_donnees.html("<p> Succès ! </p>");
    • $resultat_donnees.css('display','block');
    • $(valider_donnees).attr("disabled", true);

Fonction qui affiche la constellation à partir du "root" (en JSON) passé en paramètre

• $('#div_constellation').slideDown(); affichage de la zone d'affichage pour la constellation

• var margin = 1,

• diameter = window.innerWidth/1.7;

• var color = d3.scale.linear()
  • .domain([-1, 5]) plages de couleur (du plus clair au plus foncé)
  • .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"]) Pour le dégradé
  • .interpolate(d3.interpolateHcl);

• .padding(7) espacement entre les cercles
• .size([diameter - margin, diameter - margin]) taille cercle root dans son conteneur
• .value(function (d) { taille des feuilles
  • if ( typeof d.size ! 'undefined'){
    • return d.size; cas où l'utilisateur a saisie une taille pour les cercles
  • }
  • else {
    • return Math.floor(Math.random()*501); taille aléatoire sinon
  • }

• .attr("width", diameter) largeur du "rectangle" contenant le cercle root
• .attr("height", diameter) hauteur du "rectangle" contenant le cercle root
• .attr("id","carto")
• .append("g") pour grouper
• .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

Définition des tooltips

• .append("div")
• .attr("class", "myTooltip")
  • .style("opacity", 0); elles sont invisibles de base

• nodes = pack.nodes(root),
• view;

• .data(nodes)
• .enter()
• .append("circle")
• .attr("class", function (d) {
• return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root";
• si le cercle a un parent mais pas d'enfant = feuille ; si enfant mais pas parent = root si enfant et parent = noeud

• .on("mouseout",mouseout)

• if(d3.select(this).classed("node--leaf")){
  • myTooltip.html(d.name)
• .style("left", (d3.event.pageX + 10) + "px")
  • .style("top", (500) + "px") NB : petit problème d'affichage des tooltips sur l'axe Y...
  • /*.style("left", (d.x)+"px")
  • .style("top", (d.y) +"px")*/
  • .style("opacity", 1);
• }

• myTooltip.style("opacity", 0);

• function clickFct(d,i) { i = place dans l'arbre Json (0 = forcesvives = root)
  • if(d3.select(this).classed("node--leaf")){
    • if ( typeof d.url !

      'undefined'){

      • $('#volet').load(d.url); chargement de la fiche projet dans le volet

    • }
    • if (focus ! d){ si on n'est pas centré sur le focus, on zoom dessus
      • zoom(d.parent);
      • d3.event.stopPropagation(); fonction qui permet le zoom
    • }
  • }
  • else {
    • if (focus !

      d){ si on n'est pas centré sur le focus, on zoom dessus

      • zoom(d);
      • d3.event.stopPropagation();
      • }

  • }
• }

• .data(nodes)
• .enter().append("text")
• .attr("class", "label")
• .style("fill-opacity", function (d) {
• return d.parent root ? 1 : 0; opacité transparent si non feuille
• })

root ? "inline" : "none";

• var thisNode = d3.select(this);
• return d.name;

Dimensions du volet