tadkim
7/29/2017 - 2:08 AM

d3 tutorial

d3 tutorial

styles.css
content_copyfile_download
/* todo: add styles */
script.js
content_copyfile_download
const d3_body = d3.select('body');
const arr = ["A", "B", "C"];

// const h1 = d3_body
//   .selectAll("h1")
//   .data(arr)
//   .enter()
//   .append("h1")
//   .text((d) =>{ return d; });
  
// console.log(h1);


// const selectAll = d3
//   .selectAll('ul')
//   .selectAll('li')
//   .selectAll('span');
  
// console.log(selectAll);


// const d3_body = d3.select('body');
// const ul_select = d3_body.select('ul');
// console.log(ul_select);



// const ul_selectAll = d3_body.selectAll('ul');
// console.log('select :',ul_select);
// parentNode is html, because group is not changed
// console.log('selectAll : ', ul_selectAll);
// parentNode is body, because group is changed


// const aside = d3.selectAll("section").select("aside");
// console.log(aside);


// const grouped_data = [[1,2,3],[4,5]];
// const ul = d3.selectAll('ul').data(grouped_data);
// console.log(ul);
// const li = ul.selectAll('li');
// console.log(ul);
// li.data((d, i) => {
// return d;
// }).text((d)=>d);





const h1 = d3_body.selectAll('h1')
.data(arr);

console.log(h1);

const h1withEnter = d3_body.selectAll('h1')
.data(arr)
.enter()
.append('h1');
index.html
content_copyfile_download
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>D3 Js Tutorial</title>
</head>
<body>
  <!--
  <div>
    <li>e</li>
    <li>e</li>
  </div>
  <ul>
	    <li>
     		<span>aa</span>
        <span>aa</span>
	    </li>
   	    <li>
	    	<span>bb</span>
        <span>aa</span>
	    </li>
   	 </ul>    
   	 
   	 <section>
   	   
   	 </section>
   	 <section>
   	   
   	 </section>
   	 <section>
   	   <aside></aside>
   	 </section>
   	 <section>
   	   <aside></aside>
   	 </section>
   	 
   	 
   	 <ul>
   	   <li></li>
   	   <li></li>
   	   <li></li>
   	 </ul>
   	 <ul>
   	   <li></li>
   	   <li></li>
   	 </ul>
   	 
   	 <h1> h1 </h1>
   	 
   	 -->
   	 
   	<div name="A"></div>
    <div name="B"></div>
    <div name="C"></div>


   	 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.js" ></script> 
  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js" ></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
  <script src="script.js"></script>
</body>
</html>
exit.js
content_copyfile_download
const d3_body = d3.select('body');

const datas_01 = ['A', 'C', 'B'];
const datas_02 = ['A','C'];
const div_group = d3.selectAll('div')
.data(datas_01);

console.log(div_group);

const div_group2 = div_group
.data(datas_02);

console.log(div_group2);