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

add colors

Browse Source
This commit is contained in:
Mahdi Dibaiee 2015-07-26 12:55:34 +04:30
parent 0340c4bd44
commit 9395bcf82e
9 changed files with 175 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
build/demo/add.js
View File

@ -1,60 +1,14 @@
'use strict';
var data = new Trie();
data.add('go');
data.add('get');
data.add('boo');
data.add('ba');
document.addEventListener('DOMContentLoaded', function () {
var WIDTH = 700;
var HEIGHT = 600;
var MARGIN = 100;
var svg = d3.select('body').append('svg').attr('width', WIDTH + MARGIN).attr('height', HEIGHT + MARGIN).attr('viewBox', '-' + MARGIN / 2 + ' -' + MARGIN / 2 + ' ' + WIDTH + ' ' + HEIGHT);
svg.append('g').attr('class', 'lines');
var tree = d3.layout.tree().size([WIDTH - MARGIN, HEIGHT - MARGIN]);
draw();
function draw() {
console.dir(data.root);
var nodes = tree.nodes(data.root);
var links = tree.links(nodes);
var linkElements = svg.select('g.lines').selectAll('line').data(links);
linkElements.exit().remove();
linkElements.enter().append('line');
linkElements.attr('x1', function (d) {
return d.source.x;
}).attr('y1', function (d) {
return d.source.y;
}).attr('x2', function (d) {
return d.target.x;
}).attr('y2', function (d) {
return d.target.y;
}).style('stroke', 'rgb(72, 213, 91)').style('stroke-width', '2px');
var nodeElements = svg.selectAll('g.node').data(nodes);
nodeElements.exit().remove();
var nodesEnter = nodeElements.enter().append('g').attr('class', 'node');
nodeElements.attr('transform', function (d) {
return 'translate(' + d.x + ', ' + d.y + ')';
}).style('font-family', 'monospace').style('font-size', '11px').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);
nodesEnter.append('text');
var texts = svg.selectAll('g.node text').data(nodes);
texts.attr('dy', 5).html(function (d) {
return '<tspan>' + d.name.split('').join('</tspan><tspan>') + '</tspan>';
}).attr('text-anchor', 'middle').style('fill', 'white');
}
// Form and other stuff
var form = document.querySelector('form');

19
build/demo/colors.js Normal file
View File

@ -0,0 +1,19 @@
'use strict';
var 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', function () {
draw();
});

52
build/demo/draw.js Normal file
View File

@ -0,0 +1,52 @@
'use strict';
var WIDTH = 800;
var HEIGHT = 600;
var MARGIN = 100;
var svg = d3.select('body').append('svg').attr('width', WIDTH + MARGIN).attr('height', HEIGHT + MARGIN).attr('viewBox', '-' + MARGIN / 2 + ' -' + MARGIN / 2 + ' ' + WIDTH + ' ' + HEIGHT);
svg.append('g').attr('class', 'lines');
var tree = d3.layout.tree().size([WIDTH - MARGIN, HEIGHT - MARGIN]);
function draw() {
var nodes = tree.nodes(data.root);
var links = tree.links(nodes);
var linkElements = svg.select('g.lines').selectAll('line').data(links);
linkElements.exit().remove();
linkElements.enter().append('line');
linkElements.attr('x1', function (d) {
return d.source.x;
}).attr('y1', function (d) {
return d.source.y;
}).attr('x2', function (d) {
return d.target.x;
}).attr('y2', function (d) {
return d.target.y;
}).style('stroke', 'rgb(72, 213, 91)').style('stroke-width', '2px');
var nodeElements = svg.selectAll('g.node').data(nodes);
nodeElements.exit().remove();
var nodesEnter = nodeElements.enter().append('g').attr('class', 'node');
nodeElements.attr('transform', function (d) {
return 'translate(' + d.x + ', ' + d.y + ')';
}).style('font-family', 'monospace').style('font-size', '11px').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);
nodesEnter.append('text');
var texts = svg.selectAll('g.node text').data(nodes);
texts.attr('dy', 5).html(function (d) {
return '<tspan>' + d.name.split('').join('</tspan><tspan>') + '</tspan>';
}).attr('text-anchor', 'middle').style('fill', 'white');
}

2
demo/add.html
View File

@ -105,5 +105,5 @@
<script src='../build/libs/d3.js'></script>
<script src='../build/trie.js'></script>
<script src='../build/demo/data.js'></script>
<script src='../build/demo/draw.js'></script>
<script src='../build/demo/add.js'></script>

71
demo/add.js
View File

@ -1,69 +1,12 @@
let data = new Trie();
data.add('go');
data.add('get');
data.add('boo');
data.add('ba');
document.addEventListener('DOMContentLoaded', () => {
const WIDTH = 700;
const HEIGHT = 600;
const MARGIN = 100;
let svg = d3.select('body').append('svg')
.attr('width', WIDTH + MARGIN)
.attr('height', HEIGHT + MARGIN)
.attr('viewBox', `-${MARGIN / 2} -${MARGIN / 2} ${WIDTH} ${HEIGHT}`);
svg.append('g').attr('class', 'lines');
let tree = d3.layout.tree()
.size([WIDTH - MARGIN, HEIGHT - MARGIN]);
draw();
function draw() {
console.dir(data.root);
let nodes = tree.nodes(data.root);
let links = tree.links(nodes);
let linkElements = svg.select('g.lines').selectAll('line').data(links);
linkElements.exit().remove();
linkElements.enter().append('line');
linkElements.attr('x1', d => d.source.x)
.attr('y1', d => d.source.y)
.attr('x2', d => d.target.x)
.attr('y2', d => d.target.y)
.style('stroke', 'rgb(72, 213, 91)')
.style('stroke-width', '2px');
let nodeElements = svg.selectAll('g.node').data(nodes);
nodeElements.exit().remove();
let nodesEnter = nodeElements.enter().append('g').attr('class', 'node');
nodeElements.attr('transform', d => `translate(${d.x}, ${d.y})`)
.style('font-family', 'monospace')
.style('font-size', '11px')
.attr('data-word', d => d.name);
nodesEnter.append('circle');
let 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);
nodesEnter.append('text');
let texts = svg.selectAll('g.node text').data(nodes);
texts.attr('dy', 5)
.html(d => `<tspan>${d.name.split('').join('</tspan><tspan>')}</tspan>`)
.attr('text-anchor', 'middle')
.style('fill', 'white');
}
// Form and other stuff
const form = document.querySelector('form');

11
demo/colors.html Normal file
View File

@ -0,0 +1,11 @@
<head>
<title>Colors Trie</title>
</head>
<body>
<script src='../build/libs/d3.js'></script>
<script src='../build/trie.js'></script>
<script src='../build/demo/draw.js'></script>
<script src='../build/demo/colors.js'></script>
</body>

17
demo/colors.js Normal file
View File

@ -0,0 +1,17 @@
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();
});

13
demo/data.js
View File

@ -1,13 +0,0 @@
window.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');

61
demo/draw.js Normal file
View File

@ -0,0 +1,61 @@
const WIDTH = 800;
const HEIGHT = 600;
const MARGIN = 100;
let svg = d3.select('body').append('svg')
.attr('width', WIDTH + MARGIN)
.attr('height', HEIGHT + MARGIN)
.attr('viewBox', `-${MARGIN / 2} -${MARGIN / 2} ${WIDTH} ${HEIGHT}`);
svg.append('g').attr('class', 'lines');
let tree = d3.layout.tree()
.size([WIDTH - MARGIN, HEIGHT - MARGIN]);
function draw() {
let nodes = tree.nodes(data.root);
let links = tree.links(nodes);
let linkElements = svg.select('g.lines').selectAll('line').data(links);
linkElements.exit().remove();
linkElements.enter().append('line');
linkElements.attr('x1', d => d.source.x)
.attr('y1', d => d.source.y)
.attr('x2', d => d.target.x)
.attr('y2', d => d.target.y)
.style('stroke', 'rgb(72, 213, 91)')
.style('stroke-width', '2px');
let nodeElements = svg.selectAll('g.node').data(nodes);
nodeElements.exit().remove();
let nodesEnter = nodeElements.enter().append('g').attr('class', 'node');
nodeElements.attr('transform', d => `translate(${d.x}, ${d.y})`)
.style('font-family', 'monospace')
.style('font-size', '11px')
.attr('data-word', d => d.name);
nodesEnter.append('circle');
let 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);
nodesEnter.append('text');
let texts = svg.selectAll('g.node text').data(nodes);
texts.attr('dy', 5)
.html(d => `<tspan>${d.name.split('').join('</tspan><tspan>')}</tspan>`)
.attr('text-anchor', 'middle')
.style('fill', 'white');
}