데이터를 시각화 하는 것
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!-- visulizing data --> <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <p>This is a paragraph</p> <script type="text/javascript"> var dataArray = [20, 40, 50]; var canvas = d3.select("body") .append("svg") .attr("width",500) .attr("height",500); var bars = canvas.selectAll("rect") //여기서 selectAll은 지정이 안된상태라,empty select라고 할수 있다.아직은 없지만,, 미리지정한다는 느낌이랄까,,,,위의 데이터에 대한 empty select라고 볼수 있다 .data(dataArray) .enter() //placeholder,,속성은 없고 데이터만 남았을때,,,, enter에 속한 속성으로...적용한다. .append("rect") .attr("width",function(d){return d*10;}) //data의 값을 bar로 만들면서 직접적으로 값을 적는게 아니라,,,함수를 이용해서 ,,위에 데이터를 가져온다.. .attr("height",50) .attr("y", function(d,i){return i*100}); // y축을 설정하는 것인가 보다...100을 인덱스에 곱해서 서로의 간격을 줄이고 늘리는 역할을 하는듯 싶다.. </script> </body> </html> | cs |
'코딩' 카테고리의 다른 글
| append("g")를 하는 이유 (0) | 2018.11.25 |
|---|---|
| What is the meaning of 'i' in function(d,i){return i})? (0) | 2018.11.24 |
| d3 공부1 : 기본 도형 (0) | 2018.11.24 |
| d3 : enter() ,exit() (0) | 2018.11.24 |
| d3 : scale 정의역 공역 치역 (0) | 2018.11.20 |