d3 : 기본형

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