November 5, 2015 02:04
diff --git a/index.html b/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>
diff --git a/jsbin.gosatigopa.js b/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()
  ;
     
 }   
 };
	<!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>