Master 0.1.0: 
You can install the package using Bower
$ bower install --save js-binarysearch
Or download the project and find the module in dist/ folder
The directive is simple, define the directive in your html as following
<bubbletree
id="testChart" //required
control="chart" //required
link-distance='100' //optional
fill-style='solid' //optional
parent-color='steelblue' //optional
child-color='lightgray' //optional
collapsed-color='#ffdd99' //optional
link-color='#9ecae1' //optional
enable-tooltip="true" //optional
text-x="1.45em" //optional
text-y="3.45em" //optional
scale-score="10"> //optional
</bubbletree>And in your controller define the following
//this very important to communicate with the directive
//and be able to call internal functionalities
$scope.chart = {};
//load you data in anyway you want
$http.get('data.json').then(function(result) {
//once data is ready pass it to the bind function
$scope.chart.bind( result.data);
});parameter condition default description
id required NA defines the control id in the dom
control required NA refernece to scope object in order to communicate with the directive
width optional 1000 determine the svg container width
height optional 400 determine the svg container height
link-distance optional 100 determine the distanaation between each node
fill-style optional gradient changes the chart bubbles layout (solid - gradient)
parent-color optional #336699 color of any parent node (works only with solid style)
child-color optional #e0e0eb color of any child node (works only with solid style)
collapsed-color optional #19334d color of any collapsed parent node (works only with solid style)
link-color optional #9ecae1 color of link between nodes
enable-tooltip optional true show small tooltip beside the node(very basic)
text-x optional 1.45em determine the x coordinates of the node text according to its node
text-y optional 3.45em determine the y coordinates of the node text according to its node
scale-score optional 10 determine the scaling factor for node sizes(1 too small - 30 is big)
Its important to understand the data structure it will be passed to the component, each node is waiting for name & size. The parent node will hold a children value which is array of name & values
{
"name": "Root node",
"children": [{
"name": "analytics",
"children": [{
"name": "cluster",
"children": [{
"name": "Merge Edge",
"size": 700
}]
}, {
"name": "graph",
"children": [{
"name": "Betweenness Centrality",
"size": 3534
}, {
"name": "Spanning Tree",
"size": 5416
}]
}]
}]
}
You can override the default following classes in order to change the look of component
.btNode circle {
}
.btNode text {
}
.btLink {
}
div.btTooltip{
}Copyright [2016] Amgad Fahmi
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.