d3 그리기 순서.

this.drawGroupNames(svg);
this.drawAxis(svg);
this.drawData(svg);

텍스트가 먼저 그려지고 축, 데이터가 순서대로 그려져야 한다.

 

 

drawGroupNames(svg){
      for(var i = 0; i < this.dimension.length - 1; i++){
        var _group_name = this.group_name['group' + (i + 1)]
        this.drawText(i, svg, _group_name);
      }
    }

drawText(index, svg, _group_name){
  var scale_func = this.createScale();
  var xScale = scale_func[0];
  svg.selectAll(".category_group")
  .data(_group_name)
  .enter()
  .append("g")
  .attr("class", "category-group")
  .append("text")
  .text(function(d){
    return d;
  })
  .attr("x", function(d, j) {
    console.log(d);
      return 300 * (j + 1) - xScale.bandwidth();
  })
  .attr("y", function(d, j) {
      return 100 * (index + 1);
  })
  .attr("font-family", "sans-serif")
  .attr("font-size", "11px")
  .attr("fill", "black")
  .attr("text-anchor", "middle");
}

클래스를 부여함으로써 selectAll의 반복문을 써도 연속적으로 부여받음을 알 수 있다.

클래스를 부여하지 않으면, attr x의 j부분이 다른 카테고리의 끝 + 1부터 시작된다.(이유는 모름;;)

 

이제 이쁘게 그리기만 하면 된다!

 

일단은 mouseover, mouseout을 통해 메저 값이 뜨도록 하려고 한다.

 

 

        .on("mouseover", function(e, d){
          d3.select(this).transition().duration(200)
          .attr('fill', 'blue');

          d3.select('svg').selectAll('.desc')
          .data([d])
          .enter()
          .append("text")
          .attr("class", "desc")
          .text(function(d){
            console.log(d)
            return "measure : " + d['value'];
          })
          .attr("x", function(d) {
            var x = Number(d3.select(this).attr("x"));
            var width = Number(d3.select(this).attr("width"));
            return x + width / 2;
          }.bind(this))
          .attr("y", function(d) {
            return d3.select(this).attr("y") - 20;
          }.bind(this))
          .attr("text-anchor", "middle");
        })
        .on("mouseout", function(){
          d3.select(this).transition().attr('fill', 'orange');
          d3.selectAll('.desc').remove();
        });