From ca572e392e01dc160654b58b673265d47352461b Mon Sep 17 00:00:00 2001 From: Mahdi Dibaiee Date: Sun, 26 Jul 2015 13:23:28 +0430 Subject: [PATCH] data instaed of colors --- build/demo/data.js | 48 +++++++++++++++++++++++++-------- build/demo/draw.js | 6 ++--- demo/colors.js | 17 ------------ demo/{colors.html => data.html} | 4 +-- demo/data.js | 22 +++++++++++++++ demo/draw.js | 10 +++---- 6 files changed, 69 insertions(+), 38 deletions(-) delete mode 100644 demo/colors.js rename demo/{colors.html => data.html} (78%) create mode 100644 demo/data.js diff --git a/build/demo/data.js b/build/demo/data.js index f8bd178..6acc1b8 100644 --- a/build/demo/data.js +++ b/build/demo/data.js @@ -1,15 +1,41 @@ -'use strict'; +"use strict"; -window.data = new Trie(); +var data = new Trie(); -data.add('colors'); -data.add('coffee'); -// data.add('codecs'); +var 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"] +}; -data.add('boo'); -// data.add('boloss'); -// data.add('badass'); +for (var category in json) { + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; -// data.add('rebecca'); -// data.add('robots'); -// data.add('rio'); + try { + for (var _iterator = json[category][Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + 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); +}); diff --git a/build/demo/draw.js b/build/demo/draw.js index 094ad6c..aba82b7 100644 --- a/build/demo/draw.js +++ b/build/demo/draw.js @@ -10,7 +10,7 @@ svg.append('g').attr('class', 'lines'); var tree = d3.layout.tree().size([WIDTH - MARGIN, HEIGHT - MARGIN]); -function draw() { +function draw(small) { var nodes = tree.nodes(data.root); var links = tree.links(nodes); @@ -34,14 +34,14 @@ function draw() { nodeElements.attr('transform', function (d) { 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; }); nodesEnter.append('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'); var texts = svg.selectAll('g.node text').data(nodes); diff --git a/demo/colors.js b/demo/colors.js deleted file mode 100644 index 4dc311a..0000000 --- a/demo/colors.js +++ /dev/null @@ -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(); -}); diff --git a/demo/colors.html b/demo/data.html similarity index 78% rename from demo/colors.html rename to demo/data.html index b1ef038..5691972 100644 --- a/demo/colors.html +++ b/demo/data.html @@ -3,9 +3,9 @@ - + - + diff --git a/demo/data.js b/demo/data.js new file mode 100644 index 0000000..099bed9 --- /dev/null +++ b/demo/data.js @@ -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); +}); diff --git a/demo/draw.js b/demo/draw.js index 1740c62..57f0019 100644 --- a/demo/draw.js +++ b/demo/draw.js @@ -12,7 +12,7 @@ svg.append('g').attr('class', 'lines'); let tree = d3.layout.tree() .size([WIDTH - MARGIN, HEIGHT - MARGIN]); -function draw() { +function draw(small) { let nodes = tree.nodes(data.root); let links = tree.links(nodes); @@ -33,22 +33,22 @@ function draw() { nodeElements.attr('transform', d => `translate(${d.x}, ${d.y})`) .style('font-family', 'monospace') - .style('font-size', '11px') + .style('font-size', (small ? '6' : '11') + 'px') .attr('data-word', d => d.name); nodesEnter.append('circle'); let circles = nodeElements.selectAll('circle'); - circles.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', 10) + .attr('r', small ? 5 : 10) .transition() .ease(d3.ease('elastic')) .duration(700) - .attr('r', 25); + .attr('r', small ? 15 : 25); nodesEnter.append('text');