[컴][자바스크립트] d3 cheat sheet





d3 cheat sheet

d3 enter()

D3's enter() and exit(): Under the Hood - Peter Cook

enter() 가 없다면,

d3.selectAll('div')
d3.selectAll('div').data(myData).text(function(d) {return d;});


enter() 

div 가 생긴후에 selectAll() 을 한다.
d3.selectAll('div').data(myData).enter().append('div').text(function(d) {return d;});


linear

연속적인 입력 값(continuous input domain) 과 연속적인 출력 범위(continuous output range) 를 mapping 할 때 사용하면 된다.

예시

d3.scale.linear().range([0, 100]).domain([-10, 10]).nice()

출력범위는 0, 100 사이다. (range[0,100])
그리고 -10 ~ 10 까지가 정의역 부분이다.(domain[-10, 10])
그리고 이 domain 의 소수점이 너무 많으면 적당히 반올림한 값을 정의역으로 해라(nice())



ordinal()


주어진 값 x 에 대해 output range 범위에서 그에 맞는 값을 주게 된다. 이걸 이용해서 graph 등을 그릴 때 x 값에 대해 알맞은 y 의 위치를 설정할 수 있다.

예시

아래처럼 mapping 되는 input 1,2,3,4 는 rangePoints([0, 100]) 로 range 를 잡아주면, 아래 주석처럼 [0, 33.333333333333336, 66.66666666666667, 100] 의 범위로 잡는다.
var o = d3.scale.ordinal().domain([1, 2, 3])
          .rangePoints([0, 100]);
o.range(); // [0, 33.333333333333336, 66.66666666666667]

var o = d3.scale.ordinal()
    .domain([1, 2, 3, 4])
    .rangeRoundPoints([0, 100]);

o.range(); // [1, 25, 50, 75]
o.rangeBand(); // 25  - 구간의 크기를 알려준다.



d3.extent


extent는 array 값중에 최소, 최대 값을 찾아서 준다.
d3.extent([3, 2, 4, 5, 10])
>> [2, 10]
d3.extent([{value:3}, {value:2}, {value:4}, {value:5}, {value:10}], function(d){return d.value})
>> [2, 10]



axis

다양한 Axis 예제 및 api 설명

범위가 0~100(range)
그중에 정의역 부분은 0~10(domain[0,10])
x축의 값에 % 기호를 덧붙이기(tickFormat)

x축의 값들의 기준점 변경 (0,0)-->(0, this.height) 로 변경(translate)

this.x = d3.scale.linear()
                .range([0, 100]);
this.x.domain([0, 10]).nice();
this.xAxis = d3.svg.axis()
                    .scale(this.x)
                    .orient("bottom")
                    .tickFormat(function(d) { return d + '%' }); 
let svgG = d3.select('body')
svgG.append("g")
            .attr("class", `x ${styles.axis}`)
            .attr("transform", `translate(0, ${this.height})`)
            .call(this.xAxis);





작성중...



See Also

  1. Playing With React and D3 – ReactJS News
  2. Gallery · d3/d3 Wiki · GitHub : 다양한 예제



References

  1. d3 v4.0 /API.md at master · d3/d3 · GitHub
  2. d3-3.x-api-reference/API-Reference.md at master · d3/d3-3.x-api-reference · GitHub


댓글 없음:

댓글 쓰기