Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 5, 2015 02:04
Show Gist options
  • Save anonymous/9ab2598c73061d82fb59 to your computer and use it in GitHub Desktop.
Save anonymous/9ab2598c73061d82fb59 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/gosatigopa
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<a onclick="test()" href="#">run</a>
<div class="main"></div>
<script id="jsbin-javascript">
var data = [{ id: 1, text: 'test', arr: [1,2,3] }];
var data2 = [{ id: 1, text: 'test', arr: [1,2,3,4] }];
window.test = function() {
var r = document.querySelector('.main');
d3gen1(r, data);
setTimeout(()=>{
d3gen1(r, data2);
},3000);
function getChildNodes(root, selector) {
if (root && root.childNodes && root.childNodes.length > 0) {
return root.childNodes;
} else {
return selector;
}
}
function d3gen1(root, data) {
var ar = d3.selectAll(getChildNodes(root,'div'))
.call((s) => s.forEach((g) => g.parentNode = root))
.data(data, function(d){ return d && d.id; });
ar
//.text((d) => d.text)
.style({color: 'red'})
.each(function(d){d3gen2(this, d.arr);})
;
ar.enter()
.append('div')
//.text((d) => d.text)
.each(function(d){d3gen2(this, d.arr);})
;
ar.exit()
//.remove();
;
}
function d3gen2(root, data) {
var ar = d3.selectAll(getChildNodes(root,'div'))
.call((s) => s.forEach((g) => g.parentNode = root))
.data(data, (d) => d);
ar
.text((d) => d)
.style({color: 'blue'})
;
ar.enter()
.append('div')
.text((d) => d)
;
ar.exit()
//.remove()
;
}
};
</script>
<script id="jsbin-source-javascript" type="text/javascript">var data = [{ id: 1, text: 'test', arr: [1,2,3] }];
var data2 = [{ id: 1, text: 'test', arr: [1,2,3,4] }];
window.test = function() {
var r = document.querySelector('.main');
d3gen1(r, data);
setTimeout(()=>{
d3gen1(r, data2);
},3000);
function getChildNodes(root, selector) {
if (root && root.childNodes && root.childNodes.length > 0) {
return root.childNodes;
} else {
return selector;
}
}
function d3gen1(root, data) {
var ar = d3.selectAll(getChildNodes(root,'div'))
.call((s) => s.forEach((g) => g.parentNode = root))
.data(data, function(d){ return d && d.id; });
ar
//.text((d) => d.text)
.style({color: 'red'})
.each(function(d){d3gen2(this, d.arr);})
;
ar.enter()
.append('div')
//.text((d) => d.text)
.each(function(d){d3gen2(this, d.arr);})
;
ar.exit()
//.remove();
;
}
function d3gen2(root, data) {
var ar = d3.selectAll(getChildNodes(root,'div'))
.call((s) => s.forEach((g) => g.parentNode = root))
.data(data, (d) => d);
ar
.text((d) => d)
.style({color: 'blue'})
;
ar.enter()
.append('div')
.text((d) => d)
;
ar.exit()
//.remove()
;
}
};</script></body>
</html>
Raw
jsbin.gosatigopa.js
var data = [{ id: 1, text: 'test', arr: [1,2,3] }];
var data2 = [{ id: 1, text: 'test', arr: [1,2,3,4] }];
window.test = function() {
var r = document.querySelector('.main');
d3gen1(r, data);
setTimeout(()=>{
d3gen1(r, data2);
},3000);
function getChildNodes(root, selector) {
if (root && root.childNodes && root.childNodes.length > 0) {
return root.childNodes;
} else {
return selector;
}
}
function d3gen1(root, data) {
var ar = d3.selectAll(getChildNodes(root,'div'))
.call((s) => s.forEach((g) => g.parentNode = root))
.data(data, function(d){ return d && d.id; });
ar
//.text((d) => d.text)
.style({color: 'red'})
.each(function(d){d3gen2(this, d.arr);})
;
ar.enter()
.append('div')
//.text((d) => d.text)
.each(function(d){d3gen2(this, d.arr);})
;
ar.exit()
//.remove();
;
}
function d3gen2(root, data) {
var ar = d3.selectAll(getChildNodes(root,'div'))
.call((s) => s.forEach((g) => g.parentNode = root))
.data(data, (d) => d);
ar
.text((d) => d)
.style({color: 'blue'})
;
ar.enter()
.append('div')
.text((d) => d)
;
ar.exit()
//.remove()
;
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment