如何在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);
}

这将使事情变得困难，就像在条形图顶部添加文本一样，它将使你的高度作为宽度，但这是一个不错的临时修复。