data instaed of colors
This commit is contained in:
parent
bcd52f354a
commit
ca572e392e
@ -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);
|
||||
});
|
||||
|
@ -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);
|
||||
|
@ -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();
|
||||
});
|
@ -7,5 +7,5 @@
|
||||
<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>
|
||||
<script src='../build/demo/data.js'></script>
|
||||
</body>
|
22
demo/data.js
Normal file
22
demo/data.js
Normal 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
10
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');
|
||||
|
Loading…
Reference in New Issue
Block a user