*html이 있는 경우
<svg height="60" width="120">
<rect width="10" x="10" height="20" y="30"></rect>
<rect width="10" x="40" height="20" y="30"></rect>
<rect width="10" x="70" height="20" y="30"></rect>
</svg>
d3.selectAll("rect").style('fill', 'red');
*기본형 in 4.0
var circle = svg.selectAll("circle").data(data) // UPDATE .style("fill", "blue"); circle.exit().remove(); // EXIT circle.enter().append("circle") // ENTER .style("fill", "green") .merge(circle) // ENTER + UPDATE .style("stroke", "black");
*canvas를 이용해서 가상으로 만들경우
const canvas = d3
.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
canvas
.selectAll("rect")
.data(dataArray)
.enter()
.append("rect")
.attr("width",function(d){return widthScale(d);})
.attr("height",50)
.attr("fill", function(d){return color(d);})
.attr("y", function(d,i){return i*100});
selectAll은 가상으로 만든거다...
'코딩' 카테고리의 다른 글
javascript 매개변수와 인수 차이 feat.인자.... (0) | 2018.12.24 |
---|---|
javascript : 탬플릿 문자열 (백틱기호) (1) | 2018.12.24 |
d3 : style class ....in d3 (0) | 2018.12.23 |
javascript : 콜백함수 (0) | 2018.12.22 |
javascript : 사용자 정의 객체 (0) | 2018.12.22 |