본문 바로가기

Graphic3

d3 data return # d3 data return ##### [source : https://jsfiddle.net/softm/gcphg56v/ ](https://jsfiddle.net/softm/gcphg56v/) ```css ``` ```javascript ``` // 1. select를 이용해 body태그 요소를 찾는다. // 2. selectAll을 이용해 p태그 요소를 찾는다. // 3. data를 이용해 array의 크기만큼의 가상의 데이터 구조를 만든다. // 4. enter를 이용해 현재영역(p태그)의 상위영역으로 데이터처리영역으로 진입시킨다. ( p태그의 상위영역 body으로 데이터처리할 영역이 설정된다. ) // enter는 기존에 존재하는 영역에는 영역을 만들지 않는다 // 예를 들어 p로 선택된 영역이.. 2019. 7. 17.
d3js - enter(), update() and exit() d3js - enter(), update() and exit() ##### [source : https://jsfiddle.net/softm/ourf2exL/ ](https://jsfiddle.net/softm/ourf2exL/) 참고 : http://bl.ocks.org/alansmithy/e984477a741bc56db5a5 ```css ``` ```javascript //2 different data arrays var dataArray1 = [30,35,45,55,70]; var dataArray2 = [50,55,45,35,20,25,25,40]; //globals var dataIndex=1; var xBuffer=50; var yBuffer=150; var lineLength=400; //c.. 2019. 7. 16.
d3 enter d3 enter ##### [source : https://jsfiddle.net/softm/q1ofn8tL](https://jsfiddle.net/softm/q1ofn8tL) ```css ``` ```javascript //window.onload = function() { var dataset = [ 5, 10, 15, 20, 25 ]; d3.select("div") // 1 .selectAll("p") // 2 .data(dataset) // 3 .enter() // 4 .append("p") // 5 .text("New paragraph!"); // 6 d3.selectAll("p").style("color", function() { return "hsl(" + Math.random() * 360.. 2019. 7. 15.

티스토리툴바