D3js step1 기본

D3js step1 기본

D3js  - https://d3js.org/

d3.js소스 - http://d3js.org/d3.v3.min.js

참고 예제 - http://bl.ocks.org/

현재 버전이 v3, v4 두개 버전이 나와 있는데 나는 v3버전으로 진행해 나갈 것이다. 

참고로 두개 버전이 약간 차이가 있다( v3버전에서 쓰던 메소드가 v4에서는 없고 혹은 이름이 바뀌었다던지 그럴 수 있다 )

기본 익힐 메소드

d3.select()

d3.selectAll()

d3.enter()

d3.exit()

d3.data()

d3.html()

d3.style()

d3.max()

d3.append()

d3.domain()

d3.range()

d3.svg.axis()

d3.json()

d3.csv()

1. d3.select() 사용하여 스타일 및 html 콘텐츠 설정 

//  body태그에 빈 div를 추가하여 검정색 라인을 가진  hello world 텍스트도 추가.
d3.select("body").append("div").style("border", "1px solid black").html("hello world");      

2. 기본 도형을 생성해보기

var svgGraphic=d3.select("body").append("svg").attr({width:500, height:500});
svgGraphic.append("line")
        .attr({
            x1:20, 
            y1:20, 
            x2:400, 
            y2:400
        })
        .style({
            "stroke":"black", 
            "stroke-width":"2px"
        });
svgGraphic.append("circle")
           .attr("r", 20)
           .attr("cx", 20)
           .attr("cy", 20)
           .style("fill", "red");
svgGraphic.append("circle")
           .attr("r", 100)
           .attr("cx", 400)
           .attr("cy", 400)
           .attr("fill", "lightblue");
svgGraphic.append("text")
           .attr("id", "b")
           .attr("x", 400)
           .attr("y", 400)
           .text("hello WORLD");

style()와 attr() 메소드 사용시 속성이 여러개일 경우 

{ x1:20, y1:20..... }  이렇게 Object 리터럴 타입으로 선언해도 된다. 

혹은 혹은 키:값 과 같은 방식으로 attr("x1", 20) 처럼 한개씩 입력해도 된다. 

Object 리터럴 타입으로 선언시 주의할 점은 jQuery처럼 카멜표기법은 지원하지 않기에 속성 선언시 주의해야 한다.

그래서 위에서 첫번째로 style 선언한 것을 보면  style({ "stroke-width":"2px" } ) 처럼 선언한 것을 볼 수 있다.