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轴，反之亦然。

BaseStep.__subclasses__

这会让事情变得困难，只要在条形图上添加文字，它就会使你的身高变宽，但这是一个不错的临时修复。

如何在D3条形图中旋转x和y轴

1 个答案: