Angular Directives for d3 tree and graph with the addition of drag and drop, and collapsible d3.js Tree
This is a fork of the ng-d3tree repository obtained by introducing and adapting the code taken here: Drag and drop, collapsible d3.js Tree with 50,000 nodes
bower install --save ng-d3tree-drag-drop-collapsebower install --save ng-d3tree-
Copy the content of the file
src/ng-d3tree.jsin the corresponding file in your project -
Copy the content of the file
src/css/ng-d3tree.cssin the corresponding file in your project -
Use these 2 files instead of the minified versions
<!DOCTYPE html>
<html>
<head>
<title>tree</title>
<script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="[email protected]"></script>
<script data-require="d3@*" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/tmontanaro/ng-d3tree/master/src/ng-d3tree.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/tmontanaro/ng-d3tree/master/src/css/ng-d3tree.css" />
</head>
<body ng-app="d3treeApp">
<script>
var app = angular.module("d3treeApp", ['ngD3tree']);
app.controller("treeCtrl", ['$scope', '$http', function($scope, $http) {
$http.get('https://raw.githubusercontent.com/tmontanaro/ng-d3tree/master/examples/data/data1.json')
.success(function(res){
$scope.d3json = res;
});
}]);
</script>
<div ng-controller="treeCtrl">
<h2>Reingold-Tilford Tree With Drag and Drop, and Collapsible tree</h2>
<drag-and-drop-collapsible
data="d3json"
width="550"
height="500"
json-path="">
</drag-and-drop-collapsible>
</div>
</body>
</html>