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); 
} 

これは限り棒グラフの上にテキストを追加するなど、物事が困難になり、そしてそれは、幅と高さ、あなたの行為を行いますが、それはまともな一時的な修正です。