thereadme/autocomplete-trie
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

data instaed of colors

Browse Source
This commit is contained in:
Mahdi Dibaiee
2015-07-26 13:23:28 +04:30
parent bcd52f354a
commit ca572e392e
6 changed files with 69 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
build/demo/data.js
View File

@@ -1,15 +1,41 @@
'use strict'; "use strict";
window.data = new Trie(); var data = new Trie();
data.add('colors'); var json = {
data.add('coffee'); "color": ["red", "rebecca", "blue", "cyan", "pink", "purple", "teal", "black", "white", "orange", "yellow", "green"],
// data.add('codecs'); "name": ["Jack", "James", "Alex", "Adam", "Mahdi", "Josh", "Scott", "Pat", "Vincent", "Daniel", "Patrick", "Tim"],
"app": ["Atom", "Sublime", "Firefox", "Chrome", "Safari", "Mail", "Blender", "Sketch", "Slack", "Finder", "Nightly", "Aurora", "f.lux", "LookUp", "WunderList", "Instagram", "Toggl"]
};
data.add('boo'); for (var category in json) {
// data.add('boloss'); var _iteratorNormalCompletion = true;
// data.add('badass'); var _didIteratorError = false;
var _iteratorError = undefined;
// data.add('rebecca'); try {
// data.add('robots'); for (var _iterator = json[category][Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
// data.add('rio'); var item = _step.value;
var node = data.add(item);
node.category = category;
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator["return"]) {
_iterator["return"]();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
document.addEventListener('DOMContentLoaded', function () {
draw(true);
});

6
build/demo/draw.js
View File

@@ -10,7 +10,7 @@ svg.append('g').attr('class', 'lines');
var tree = d3.layout.tree().size([WIDTH - MARGIN, HEIGHT - MARGIN]); var tree = d3.layout.tree().size([WIDTH - MARGIN, HEIGHT - MARGIN]);
function draw() { function draw(small) {
var nodes = tree.nodes(data.root); var nodes = tree.nodes(data.root);
var links = tree.links(nodes); var links = tree.links(nodes);
@@ -34,14 +34,14 @@ function draw() {
nodeElements.attr('transform', function (d) { nodeElements.attr('transform', function (d) {
return 'translate(' + d.x + ', ' + d.y + ')'; return 'translate(' + d.x + ', ' + d.y + ')';
}).style('font-family', 'monospace').style('font-size', '11px').attr('data-word', function (d) { }).style('font-family', 'monospace').style('font-size', (small ? '6' : '11') + 'px').attr('data-word', function (d) {
return d.name; return d.name;
}); });
nodesEnter.append('circle'); nodesEnter.append('circle');
var circles = nodeElements.selectAll('circle'); var circles = nodeElements.selectAll('circle');
circles.attr('r', 25).style('fill', 'rgb(28, 236, 166)').style('stroke', 'rgb(17, 172, 144)').style('fill', 'rgb(28, 236, 166)').style('stroke', 'rgb(17, 172, 144)').attr('r', 10).transition().ease(d3.ease('elastic')).duration(700).attr('r', 25); circles.attr('r', small ? 15 : 25).style('fill', 'rgb(28, 236, 166)').style('stroke', 'rgb(17, 172, 144)').style('fill', 'rgb(28, 236, 166)').style('stroke', 'rgb(17, 172, 144)').attr('r', small ? 5 : 10).transition().ease(d3.ease('elastic')).duration(700).attr('r', small ? 15 : 25);
nodesEnter.append('text'); nodesEnter.append('text');
var texts = svg.selectAll('g.node text').data(nodes); var texts = svg.selectAll('g.node text').data(nodes);

17
demo/colors.js
View File

@@ -1,17 +0,0 @@
let data = new Trie();
data.add('colors');
data.add('coffee');
data.add('codecs');
data.add('boo');
data.add('boloss');
data.add('badass');
data.add('rebecca');
data.add('robots');
data.add('rio');
document.addEventListener('DOMContentLoaded', () => {
draw();
});

4
demo/colors.html → demo/data.html
View File

@@ -3,9 +3,9 @@
</head> </head>
<body> <body>
<script src='../build/libs/d3.js'></script> <script src='../build/libs/d3.js'></script>
<script src='../build/trie.js'></script> <script src='../build/trie.js'></script>
<script src='../build/demo/draw.js'></script> <script src='../build/demo/draw.js'></script>
<script src='../build/demo/colors.js'></script> <script src='../build/demo/data.js'></script>
</body> </body>

22
demo/data.js Normal file
View File

@@ -0,0 +1,22 @@
let data = new Trie();
let json = {
"color": ["red", "rebecca", "blue", "cyan", "pink", "purple",
"teal", "black", "white", "orange", "yellow", "green"],
"name": ["Jack", "James", "Alex", "Adam", "Mahdi", "Josh", "Scott",
"Pat", "Vincent", "Daniel", "Patrick", "Tim"],
"app": ["Atom", "Sublime", "Firefox", "Chrome", "Safari", "Mail",
"Blender", "Sketch", "Slack", "Finder", "Nightly", "Aurora",
"f.lux", "LookUp", "WunderList", "Instagram", "Toggl"]
};
for (let category in json) {
for (let item of json[category]) {
let node = data.add(item);
node.category = category;
}
}
document.addEventListener('DOMContentLoaded', () => {
draw(true);
});

10
demo/draw.js
View File

@@ -12,7 +12,7 @@ svg.append('g').attr('class', 'lines');
let tree = d3.layout.tree() let tree = d3.layout.tree()
.size([WIDTH - MARGIN, HEIGHT - MARGIN]); .size([WIDTH - MARGIN, HEIGHT - MARGIN]);
function draw() { function draw(small) {
let nodes = tree.nodes(data.root); let nodes = tree.nodes(data.root);
let links = tree.links(nodes); let links = tree.links(nodes);
@@ -33,22 +33,22 @@ function draw() {
nodeElements.attr('transform', d => `translate(${d.x}, ${d.y})`) nodeElements.attr('transform', d => `translate(${d.x}, ${d.y})`)
.style('font-family', 'monospace') .style('font-family', 'monospace')
.style('font-size', '11px') .style('font-size', (small ? '6' : '11') + 'px')
.attr('data-word', d => d.name); .attr('data-word', d => d.name);
nodesEnter.append('circle'); nodesEnter.append('circle');
let circles = nodeElements.selectAll('circle'); let circles = nodeElements.selectAll('circle');
circles.attr('r', 25) circles.attr('r', small ? 15 : 25)
.style('fill', 'rgb(28, 236, 166)') .style('fill', 'rgb(28, 236, 166)')
.style('stroke', 'rgb(17, 172, 144)') .style('stroke', 'rgb(17, 172, 144)')
.style('fill', 'rgb(28, 236, 166)') .style('fill', 'rgb(28, 236, 166)')
.style('stroke', 'rgb(17, 172, 144)') .style('stroke', 'rgb(17, 172, 144)')
.attr('r', 10) .attr('r', small ? 5 : 10)
.transition() .transition()
.ease(d3.ease('elastic')) .ease(d3.ease('elastic'))
.duration(700) .duration(700)
.attr('r', 25); .attr('r', small ? 15 : 25);
nodesEnter.append('text'); nodesEnter.append('text');