D3 막 대형 차트에서 x 축과 y 축을 어떻게 회전합니까?

Question

세로 대신 가로형 막대 차트를 사용하는 방법을 알아 내려고합니다. 포럼과 다른 D3 코드를 살펴 보았을뿐만 아니라이를 수행하는 방법을 설명하기 위해 비디오를 보았지만 여전히 파악할 수는 없습니다. 여기에 내 코드가있다.

<script> 
    var data = [ 
    { 
     skill:"FBSO", 
     TEAM:57, 
     OPP:50 
    }, 
    { 
     skill:"SO", 
     TEAM:73, 
     OPP:61 
    }, 
    { 
     skill:"ModSO", 
     TEAM:69, 
     OPP:57 
    }, 
    { 
     skill:"ErndSO", 
     TEAM:67, 
     OPP:52 
    }, 
    { 
     skill:"FBPS", 
     TEAM:35, 
     OPP:25 
    }, 
    { 
     skill:"PS", 
     TEAM:43, 
     OPP:29 
    } 
]; 

var margin = { 
      top: 20, 
      right: 20, 
      bottom: 40, 
      left: 60 
     }, 
      width = 450 - margin.left - margin.right, 
      height = 315 - margin.top - margin.bottom, 
      that = this; 


     var x = d3.scale.ordinal().rangeRoundBands([0, width], .3); 
    var x2 = d3.scale.ordinal().rangeRoundBands([0, width], .3); 
     var y = d3.scale.linear().rangeRound([height, 0]); 

     var color = d3.scale.category20(); 

     var xAxis = d3.svg.axis().scale(x).orient("bottom"); 
    var xAxis2 = d3.svg.axis().scale(x).orient("top"); 
    var yAxis = d3.svg.axis().scale(x).orient("left"); 
    var yAxis2 = d3.svg.axis().scale(x).orient("right"); 

     // var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(d3.format(".0%")); 

     var svg = d3.select(".viz-portfolio-delinquent-status").append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

     color.domain(d3.keys(data[0]).filter(function (key) { 
      return key !== "interest_rate"; 
     })); 


     data.forEach(function (d) { 
      var y0 = 0; 

      d.rates = color.domain().map(function (name) { 
       // console.log(); 
     // ; 
       return { 
        name: name, 
        y0: y0, 
        y1: y0 += +d[name], 
        amount: d[name] 
       }; 
      }); 
      d.rates.forEach(function (d) { 
       d.y0 /= y0; 
       d.y1 /= y0; 
      }); 

      // console.log(data); 
     }); 

     data.sort(function (a, b) { 
      return b.rates[0].y1 - a.rates[0].y1; 
     }); 

     x.domain(data.map(function (d) { 
      return d.interest_rate; 
     })); 

     svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis); 

    svg.append('g').attr('class', 'x axis').attr('transform', 'translate(0,'+ height/375 +')').call(xAxis2); 

    svg.append("g").attr("class", "x axis").attr("transform", "translate(" + width + ",0)").call(yAxis2); 

    svg.append('g').attr('class', 'y axis').attr('transform', 'translate('+ height/375 +',0)').call(yAxis); 

     // svg.append("g").attr("class", "y axis").call(yAxis); 



     var interest_rate = svg.selectAll(".interest-rate").data(data).enter().append("g").attr("class", "interest-rate").attr("transform", function (d) { 
    // conosole.log(d) 
    return "translate(" + x(d.interest_rate) + ",0)"; 
     }); 

     interest_rate.selectAll("rect") 
    .data(function (d) { 
      return d.rates; 
      }) 
    .enter() 
    .append("rect") 
    .attr("width", x.rangeBand()) 
    .attr("y", function (d) { 
        return y(d.y1); 
       }) 
    .attr("height", function (d) { 
     // console.log(d) 
       return y(d.y0) - y(d.y1); 
       }) 
    .style("fill", function (d) { 
      return color(d.name); 
       }) 
    .on('mouseover', function (d) { 
      var total_amt; 
      total_amt = d.amount; 



      // console.log('----'); 
      // d3.select(".chart-tip").style('opacity', '1').html('Amount: <strong>$' + that.numberWithCommas(total_amt.toFixed(2)) + '</strong>'); 

     }).on('mouseout', function() { 
      d3.select(".chart-tip").style('opacity', '0'); 
     }); 

나는 그것을, 난 그냥 변경해야하는 X 년대와 y의 알 수없는 너무 어려운 일이 아니다 확신합니다. 감사!

Answer 1

그래서 나는 그것을 약간 알아 냈습니다. 내 음모가있는 svg를 회전시켜 시각적으로 x 축을 y 축으로 표시하고 그 반대도 마찬가지입니다.

svg { 
    transform: rotate(90deg); 
} 

이

은 멀리 막대 차트의 상단에 텍스트를 추가하는 등의 상황이 어려운 것, 그것은 너비로 높이 역할을 할 것입니다,하지만 괜찮은 임시 수정입니다.