d3 cheat sheet
d3 enter()
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);text 값 변경
svg.append('text')
.attr("y", 50)
.attr("x", 140)
.attr("dy", "2em")
.node().textContent = 'mytext'작성중...
댓글 없음:
댓글 쓰기