Skip to content

Latest commit

 

History

History
84 lines (59 loc) · 2.13 KB

README.MD

File metadata and controls

84 lines (59 loc) · 2.13 KB

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

Online Demo

Access plunker

http://plnkr.co/edit/wW7a3L

Quick Start

Install via Bower

bower install --save ng-d3tree-drag-drop-collapse

Slow Start (install original Directive and them make changes

Install via Bower

bower install --save ng-d3tree

  1. Copy the content of the file src/ng-d3tree.js in the corresponding file in your project

  2. Copy the content of the file src/css/ng-d3tree.css in the corresponding file in your project

  3. Use these 2 files instead of the minified versions

Usage

<!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>