*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은 가상으로 만든거다...




















+ Recent posts