[D3.js] Tests difficiles avec l’arbre de D3.js (Customisation…)

d3js

Introduction


La librairie D3.js propose des solutions de visualisation de données innovantes, à intégrer dans les applications WEB de demain. C’est une librairie open source et donc gratuite.

Lorsque l’on suit les exemples des codes exemples, et que l’on y intègre ses propres modèles de données JSON, c’est relativement accessible.

Les problèmes commencent lorsque l’on veut ajouter des fonctionnalités inexistantes à un graphique D3.js, ouch , et que l’on ne connait pas l’API!

Là, je décide de customiser l’arbre de D3.JS (Qui n’est même pas celui de base !) en y ajoutant la faculté de supprimer un node, de le renommer et de faire d’autres choses comme ajouter des images… Je débute, donc je glane des portions de codes D3.Js associés à l’arbre sur internet, puis je les colle dans le code en essayant de réflechir…

J’ai aussi besoin de créer un menu contextuel avec un click droit, autant dire que ce n’est pas de la tarte au début !

Le but final est de pouvoir intégrer cet arbre à une application permettant de gérer des projets .

Pour tester, c’est ici:  http://nicolash.org/d3/

Photo de l’arbre à customiser :


d3.jpg

Ce que j’ai réussi à ajouter au jour 1:



  • Intégration dans AngularJs (Pas très beau, le code JS est directement dans une fonction Js)…
  • Ajout d’un node sur double clic (Il faudra le mettre dans un menu contextuel, en plus ca buggote au niveau des cercles)
  • Edition du nom d’un node
  • Suppression du behavior sur clic Droit.

 

Liens utiles


  • http://bl.ocks.org/robschmuecker/7880033
  • http://fiddle.jshell.net/mattsrinc/g8wfegyb/3/light/
  • http://plnkr.co/edit/bDBe0xGX1mCLzqYGOqOS?p=preview
  • http://bl.ocks.org/d3noob/9662ab6d5ac823c0e444
  • https://github.com/patorjk/d3-context-menu
  • http://plnkr.co/edit/bDBe0xGX1mCLzqYGOqOS?p=preview
  • http://jsfiddle.net/mnk/vfro9tkz/
  • http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html

 

 

Le code au jour 1


La vue HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Neutre</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
		<!-- CHARGEMENT DES LIBRAIRIES -->
		
		<!-- JQUERY ET BOOTSRAP -->
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" type="text/css">
 
        <!-- ANGULARJS -->
        <script src='bower_components/angular/angular.min.js'></script>
		
		<!-- D3 -->
		  <script src='http://d3js.org/d3.v3.min.js'></script>
		 <!--  <script src="js/dndtree.js"></script> -->
		<!-- APPLICATION PERSO -->
		
		<link rel="stylesheet" type="text/css" href="css/style.css"> 
		
		<!-- FIN DE CHARGEMENT DES LIBRAIRIES -->
  </head>

<body ng-app="neutre" ng-controller="neutreCtrl">
	<div class="container-fluid">
 
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                    </button>
                    <a class="navbar-brand" href="#">Neutre</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
	
	<div class="row ">
		<div class="col-lg-12 " >
			 <div class="panel panel panel-warning">
				
				<div class="panel-heading"> 
					<i class="fa fa-picture-o"></i> 
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm pull-right" ng-model="collapsed" ng-click="collapsed=!collapsed" data-widget="collapse"><i class="fa fa-minus"></i></button>
					</div>
				</div>
				
				<div ng-show="!collapsed" class="panel-body table-responsive" style="min-height:350px;">
				
				<div id="tree-container"></div>
				<button ng-click = "refresh()">refresh</button>
				<button ng-click = "ajout()">ajout</button>
				</div>
				
				<div class="panel-footer ">
					<div class="form-group">
					
					</div> 
				</div>
				
			 </div>
		</div>
	</div>
		
	
	


	
	
	
	</div>
	
<!-- FIN DE DIV GLOABLE FLUID -->
</div>
	
</body>
<script src="js/app.js"></script>
</html>

Le controleur AngularJS :

angular.module('neutre', [])

.controller('neutreCtrl', function($scope) {

 treeData = setData();

 function setData(){
 treeData = { "name": "flare",
    "children": [{
        "name": "analytics",
        "children": [{
            "name": "cluster",
            "children": [{
                "name": "AgglomerativeCluster",
                "size": 3938,
				 "type": "steelblue",
            "level": "orange"
            }, {
                "name": "CommunityStructure",
                "size": 3812
            }, {
                "name": "HierarchicalCluster",
                "size": 6714
            }, {
                "name": "MergeEdge",
                "size": 743
            }]
        }, {
            "name": "graph",
            "children": [{
                "name": "BetweennessCentrality",
                "size": 3534
            }, {
                "name": "LinkDistance",
                "size": 5731
            }, {
                "name": "MaxFlowMinCut",
                "size": 7840
            }, {
                "name": "ShortestPaths",
                "size": 5914
            }, {
                "name": "SpanningTree",
                "size": 3416
            }]
        }, {
            "name": "optimization",
            "children": [{
                "name": "AspectRatioBanker",
                "size": 7074
            }]
        }]
    }]
};
return treeData;
}

$scope.ajout = function(){
	treeData = setData();
	treeData.children.push({"name": 'tre',
        "children": [{"name": "jober",
            "children": [{
                "name": "AgglomerativeCluster",
                "size": 3938
            }]
	}]}); 

	d3.select("svg").remove();

	$scope.refresh();  

}

$scope.refresh = function(){

	// Get JSON data
/* treeJSON = d3.json("flare.json", function(error, Data) {  */

/* treeData =  setData(); */
/* ajout(); */

    // Calculate total nodes, max label length
    var totalNodes = 0;
    var maxLabelLength = 0;
    // variables for drag/drop
    var selectedNode = null;
    var draggingNode = null;
    // panning variables
    var panSpeed = 200;
    var panBoundary = 20; // Within 20px from edges will pan when dragging.
    // Misc. variables
    var i = 0;
    var duration = 750;
    var root;

    // size of the diagram
    var viewerWidth = $(document).width();
    var viewerHeight = $(document).height();

    var tree = d3.layout.tree()
        .size([viewerHeight, viewerWidth]);

    // define a d3 diagonal projection for use by the node paths later on.
    var diagonal = d3.svg.diagonal()
        .projection(function(d) {
            return [d.y, d.x];
        });

    // A recursive helper function for performing some setup by walking through all nodes

    function visit(parent, visitFn, childrenFn) {
        if (!parent) return;

        visitFn(parent);

        var children = childrenFn(parent);
        if (children) {
            var count = children.length;
            for (var i = 0; i < count; i++) {                 visit(children[i], visitFn, childrenFn);             }         }     }     // Call visit function to establish maxLabelLength     visit(treeData, function(d) {         totalNodes++;         maxLabelLength = Math.max(d.name.length, maxLabelLength);     }, function(d) {         return d.children && d.children.length > 0 ? d.children : null;
    });

    // sort the tree according to the node names

    function sortTree() {
        tree.sort(function(a, b) {
            return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;         });     }     // Sort the tree initially incase the JSON isn't in a sorted order.     sortTree();     // TODO: Pan function, can be better implemented.     function pan(domNode, direction) {         var speed = panSpeed;         if (panTimer) {             clearTimeout(panTimer);             translateCoords = d3.transform(svgGroup.attr("transform"));             if (direction == 'left' || direction == 'right') {                 translateX = direction == 'left' ? translateCoords.translate[0] + speed : translateCoords.translate[0] - speed;                 translateY = translateCoords.translate[1];             } else if (direction == 'up' || direction == 'down') {                 translateX = translateCoords.translate[0];                 translateY = direction == 'up' ? translateCoords.translate[1] + speed : translateCoords.translate[1] - speed;             }             scaleX = translateCoords.scale[0];             scaleY = translateCoords.scale[1];             scale = zoomListener.scale();             svgGroup.transition().attr("transform", "translate(" + translateX + "," + translateY + ")scale(" + scale + ")");             d3.select(domNode).select('g.node').attr("transform", "translate(" + translateX + "," + translateY + ")");             zoomListener.scale(zoomListener.scale());             zoomListener.translate([translateX, translateY]);             panTimer = setTimeout(function() {                 pan(domNode, speed, direction);             }, 50);         }     }     // Define the zoom function for the zoomable tree     function zoom() {         svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");     }     // define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents     var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom);     function initiateDrag(d, domNode) {         draggingNode = d;         d3.select(domNode).select('.ghostCircle').attr('pointer-events', 'none');         d3.selectAll('.ghostCircle').attr('class', 'ghostCircle show');         d3.select(domNode).attr('class', 'node activeDrag');         svgGroup.selectAll("g.node").sort(function(a, b) { // select the parent and sort the path's             if (a.id != draggingNode.id) return 1; // a is not the hovered element, send "a" to the back             else return -1; // a is the hovered element, bring "a" to the front         });         // if nodes has children, remove the links and nodes         if (nodes.length > 1) {
            // remove link paths
            links = tree.links(nodes);
            nodePaths = svgGroup.selectAll("path.link")
                .data(links, function(d) {
                    return d.target.id;
                }).remove();
            // remove child nodes
            nodesExit = svgGroup.selectAll("g.node")
                .data(nodes, function(d) {
                    return d.id;
                }).filter(function(d, i) {
                    if (d.id == draggingNode.id) {
                        return false;
                    }
                    return true;
                }).remove();
        }

        // remove parent link
        parentLink = tree.links(tree.nodes(draggingNode.parent));
        svgGroup.selectAll('path.link').filter(function(d, i) {
            if (d.target.id == draggingNode.id) {
                return true;
            }
            return false;
        }).remove();

        dragStarted = null;
    }

    // define the baseSvg, attaching a class for styling and the zoomListener
    var baseSvg = d3.select("#tree-container").append("svg")
        .attr("width", viewerWidth)
        .attr("height", viewerHeight)
        .attr("class", "overlay")
        .call(zoomListener);

    // Define the drag listeners for drag/drop behaviour of nodes.
    dragListener = d3.behavior.drag()
        .on("dragstart", function(d) {
            if (d == root) {
                return;
            }
            dragStarted = true;
            nodes = tree.nodes(d);
            d3.event.sourceEvent.stopPropagation();
            // it's important that we suppress the mouseover event on the node being dragged. Otherwise it will absorb the mouseover event and the underlying node will not detect it d3.select(this).attr('pointer-events', 'none');
        })
        .on("drag", function(d) {
            if (d == root) {
                return;
            }
            if (dragStarted) {
                domNode = this;
                initiateDrag(d, domNode);
            }

            // get coords of mouseEvent relative to svg container to allow for panning
            relCoords = d3.mouse($('svg').get(0));
            if (relCoords[0] < panBoundary) {                 panTimer = true;                 pan(this, 'left');             } else if (relCoords[0] > ($('svg').width() - panBoundary)) {

                panTimer = true;
                pan(this, 'right');
            } else if (relCoords[1] < panBoundary) {                 panTimer = true;                 pan(this, 'up');             } else if (relCoords[1] > ($('svg').height() - panBoundary)) {
                panTimer = true;
                pan(this, 'down');
            } else {
                try {
                    clearTimeout(panTimer);
                } catch (e) {

                }
            }

            d.x0 += d3.event.dy;
            d.y0 += d3.event.dx;
            var node = d3.select(this);
            node.attr("transform", "translate(" + d.y0 + "," + d.x0 + ")");
            updateTempConnector();
        }).on("dragend", function(d) {
            if (d == root) {
                return;
            }
            domNode = this;
            if (selectedNode) {
                // now remove the element from the parent, and insert it into the new elements children
                var index = draggingNode.parent.children.indexOf(draggingNode);
                if (index > -1) {
                    draggingNode.parent.children.splice(index, 1);
                }
                if (typeof selectedNode.children !== 'undefined' || typeof selectedNode._children !== 'undefined') {
                    if (typeof selectedNode.children !== 'undefined') {
                        selectedNode.children.push(draggingNode);
                    } else {
                        selectedNode._children.push(draggingNode);
                    }
                } else {
                    selectedNode.children = [];
                    selectedNode.children.push(draggingNode);
                }
                // Make sure that the node being added to is expanded so user can see added node is correctly moved
                expand(selectedNode);
                sortTree();
                endDrag();
            } else {
                endDrag();
            }
        });

    function endDrag() {
        selectedNode = null;
        d3.selectAll('.ghostCircle').attr('class', 'ghostCircle');
        d3.select(domNode).attr('class', 'node');
        // now restore the mouseover event or we won't be able to drag a 2nd time
        d3.select(domNode).select('.ghostCircle').attr('pointer-events', '');
        updateTempConnector();
        if (draggingNode !== null) {
            update(root);
            centerNode(draggingNode);
            draggingNode = null;
        }
    }

    // Helper functions for collapsing and expanding nodes.

    function collapse(d) {
        if (d.children) {
            d._children = d.children;
            d._children.forEach(collapse);
            d.children = null;
        }
    }

    function expand(d) {
        if (d._children) {
            d.children = d._children;
            d.children.forEach(expand);
            d._children = null;
        }
    }

    var overCircle = function(d) {
        selectedNode = d;
        updateTempConnector();
    };
    var outCircle = function(d) {
        selectedNode = null;
        updateTempConnector();
    };

    // Function to update the temporary connector indicating dragging affiliation
    var updateTempConnector = function() {
        var data = [];
        if (draggingNode !== null && selectedNode !== null) {
            // have to flip the source coordinates since we did this for the existing connectors on the original tree
            data = [{
                source: {
                    x: selectedNode.y0,
                    y: selectedNode.x0
                },
                target: {
                    x: draggingNode.y0,
                    y: draggingNode.x0
                }
            }];
        }
        var link = svgGroup.selectAll(".templink").data(data);

        link.enter().append("path")
            .attr("class", "templink")
            .attr("d", d3.svg.diagonal())
            .attr('pointer-events', 'none');

        link.attr("d", d3.svg.diagonal());

        link.exit().remove();
    };

    // Function to center node when clicked/dropped so node doesn't get lost when collapsing/moving with large amount of children.

    function centerNode(source) {
        scale = zoomListener.scale();
        x = -source.y0;
        y = -source.x0;
        x = x * scale + viewerWidth / 2;
        y = y * scale + viewerHeight / 2;
        d3.select('g').transition()
            .duration(duration)
            .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")");
        zoomListener.scale(scale);
        zoomListener.translate([x, y]);
    }

    // Toggle children function

    function toggleChildren(d) {
        if (d.children) {
            d._children = d.children;
            d.children = null;
        } else if (d._children) {
            d.children = d._children;
            d._children = null;
        }
        return d;
    }

    // Toggle children on click.

    function click(d) {
		console.log(d);

        if (d3.event.defaultPrevented) return; // click suppressed
        d = toggleChildren(d);
        update(d);
        centerNode(d);
    }

    function update(source) {
        // Compute the new height, function counts total children of root node and sets tree height accordingly.
        // This prevents the layout looking squashed when new nodes are made visible or looking sparse when nodes are removed
        // This makes the layout more consistent.
        var levelWidth = [1];
        var childCount = function(level, n) {

            if (n.children && n.children.length > 0) {
                if (levelWidth.length <= level + 1) levelWidth.push(0);

                levelWidth[level + 1] += n.children.length;
                n.children.forEach(function(d) {
                    childCount(level + 1, d);
                });
            }
        };
        childCount(0, root);
        var newHeight = d3.max(levelWidth) * 25; // 25 pixels per line
        tree = tree.size([newHeight, viewerWidth]);

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

        // Set widths between levels based on maxLabelLength.
        nodes.forEach(function(d) {
            d.y = (d.depth * (maxLabelLength * 10)); //maxLabelLength * 10px
            // alternatively to keep a fixed scale one can set a fixed depth per level
            // Normalize for fixed-depth by commenting out below line
            // d.y = (d.depth * 500); //500px per level.
        });

        // Update the nodes…
        node = svgGroup.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")
            .call(dragListener)
            .attr("class", "node")
            .attr("transform", function(d) {
                return "translate(" + source.y0 + "," + source.x0 + ")";
            })
            .on('click', click)
			/* .on('dblclick',function(d){alert('double')}) */
			.on("contextmenu", function (d, i) {
            d3.event.preventDefault();
           // react on right-clicking
			})

			.on("dblclick", function(d) {
                var a = {
                    "name": "New Node"
                  };
                if (d.children) {
                  d.children.push(a);
                } else {
                  d.children = [a];
                }
                update(d);
              })

        nodeEnter.append("circle")
            .attr('class', 'nodeCircle')
            .attr("r", 0)
            .style("fill", function(d) {
                return d._children ? "lightsteelblue" : "#fff";
            });

        nodeEnter.append("text")
            .attr("x", function(d) {
                return d.children || d._children ? -10 : 10;
            })
            .attr("dy", ".35em")
            .attr('class', 'nodeText')
            .attr("text-anchor", function(d) {
                return d.children || d._children ? "end" : "start";
            })
            .text(function(d) {
                return d.name;
            })
            .style("fill-opacity", 0)
			.call(make_editable, "name");

        // phantom node to give us mouseover in a radius around it
        nodeEnter.append("circle")
            .attr('class', 'ghostCircle')
            .attr("r", 30)
            .attr("opacity", 0.2) // change this to zero to hide the target area
        .style("fill", "red")
            .attr('pointer-events', 'mouseover')
            .on("mouseover", function(node) {
                overCircle(node);
            })
            .on("mouseout", function(node) {
                outCircle(node);
            });

        // Update the text to reflect whether node has children or not.
        node.select('text')
            .attr("x", function(d) {
                return d.children || d._children ? -10 : 10;
            })
            .attr("text-anchor", function(d) {
                return d.children || d._children ? "end" : "start";
            })
            .text(function(d) {
                return d.name;
            });

        // Change the circle fill depending on whether it has children and is collapsed
        node.select("circle.nodeCircle")
            .attr("r", 4.5)
            .style("fill", function(d) {
                return d._children ? "lightsteelblue" : "#fff";
            });

        // Transition nodes to their new position.
        var nodeUpdate = node.transition()
            .duration(duration)
            .attr("transform", function(d) {
                return "translate(" + d.y + "," + d.x + ")";
            });

        // Fade the text in
        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", 0);

        nodeExit.select("text")
            .style("fill-opacity", 0);

        // Update the links…
        var link = svgGroup.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
                });
            });

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

    // Append a group which holds all nodes and which the zoom Listener can act upon.
    var svgGroup = baseSvg.append("g");

    // Define the root
    root = treeData;
    root.x0 = viewerHeight / 2;
    root.y0 = 0;

    // Layout the tree initially and center on the root node.
    update(root);
    centerNode(root);

	function make_editable(d, field) {
              this
                .on("mouseover", function() {
                  d3.select(this).style("fill", "red");
                })
                .on("mouseout", function() {
                  d3.select(this).style("fill", null);
                })
                .on("click", function(d) {
                  var p = this.parentNode;
                  // inject a HTML form to edit the content here...

                  // bug in the getBBox logic here, but don't know what I've done wrong here;
                  // anyhow, the coordinates are completely off & wrong. :-((
                  var xy = this.getBBox();
                  var p_xy = p.getBBox();

                  xy.x = p_xy.x;
                  xy.y = p_xy.y;

                  var el = d3.select(this);
                  var p_el = d3.select(p);

                  var frm = p_el.append("foreignObject");

                  var inp = frm
                    .attr("x", xy.x)
                    .attr("y", xy.y)
                    .attr("width", 300)
                    .attr("height", 25)
                    .append("xhtml:form")
                    .append("input")
                    .attr("value", function() {
                      // nasty spot to place this call, but here we are sure that the <input> tag is available
                      // and is handily pointed at by 'this':
                      this.focus();
                      return d[field];
                    })
                    .attr("style", "width: 120px;")
                    // make the form go away when you jump out (form looses focus) or hit ENTER:
                    .on("blur", function() {
                      var txt = inp.node().value;
                      if (txt !== null && txt !== "") {
                        d[field] = txt;
                        el.text(function(d) {
                          return d[field];
                        });
                        // Note to self: frm.remove() will remove the entire <g> group! Remember the D3 selection logic!
                        //p_el.select("foreignObject").remove();
                        // Borra el Input al salir
                        inp.remove();
                      }
                    })
                    .on("keypress", function() {
                      // IE fix
                      if (!d3.event)
                        d3.event = window.event;

                      var e = d3.event;
                      if (e.keyCode == 13) {
                        if (typeof(e.cancelBubble) !== 'undefined') // IE
                          e.cancelBubble = true;
                        if (e.stopPropagation)
                          e.stopPropagation();
                        e.preventDefault();

                        var txt = inp.node().value;

                        if (txt !== null && txt !== "") {
                          d[field] = txt;
                          el.text(function(d) {
                            return d[field];
                          });

                          // odd. Should work in Safari, but the debugger crashes on this instead.
                          // Anyway, it SHOULD be here and it doesn't hurt otherwise.
                          //p_el.select("foreignObject").remove();
                          // Borra el Input al salir
                          frm.remove();
                        }
                      }
                    });
                });
            }

}
/* FIN DU CONTROLEUR */
 });

Publicités