Ändern der Ausrichtung des gestapelten Balkendiagramms von vertikal nach horizontal in D3

Question

Ich ändere die Ausrichtung des reaktionsfähigen gestapelten Balkendiagramms von vertikal auf horizontal, aber es zeigt nichts an, was nach einigen anderen Beispielen aus Stackover-Fluss wie here und here. Dies beinhaltet gestapeltes Balkendiagramm Hier ist der Code für meine vertikal gestapeltes Balkendiagramm in fiddle

Aber die aktuelle Arbeits Code ist here

var margin = { 
     top: 20, 
     right: 160, 
     bottom: 35, 
     left: 30 
     }; 

     var width = 600 - margin.left - margin.right, 
     height = 600 - margin.top - margin.bottom; 

     var svg = d3.select("body") 
     .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 + ")"); 


     /* Data in strings like it would be if imported from a csv */ 

     var data = [{ 
      year: "A", 
      redDelicious: "10", 
      mcintosh: "5", 
      oranges: "19" 
     }, { 
      year: "B", 
      redDelicious: "12", 
      mcintosh: "0", 
      oranges: "15" 
     }, { 
      year: "C", 
      redDelicious: "05", 
      mcintosh: "0", 
      oranges: "28" 
     }, { 
      year: "D", 
      redDelicious: "14", 
      mcintosh: "0", 
      oranges: "12" 
     }, 

     ]; 
     $("#btn").on("click", function(){ 
     d3.selectAll("svg > g > g").remove(); 
     data[1].mcintosh = (Number(data[1].mcintosh) + 1).toString(); 
     console.log(1,data); 
     update(); 
     }); 
     update(); 
function update(){ 
     var orangeData = data.map(function(d) { 
     return { 
      year: d.year, 
      oranges: +d.oranges 
     } 
     }); 
     console.log(orangeData) 



     // Transpose the data into layers 
     var dataset = d3.layout.stack()(["redDelicious", "mcintosh"].map(function(skillset) { 
     return data.map(function(d) { 
      return { 
      y: d.year, 
      x: +d[skillset] 
      }; 
     }); 
     })); 
     console.log(dataset) 

    xMax = d3.max(dataset, function(group) { 
      return d3.max(group, function(d) { 
       return d.x + d.x0; 
      }); 
     }), 
     xScale = d3.scale.linear() 
      .domain([0, xMax]) 
      .range([0, width]); 
     months = dataset[0].map(function(d) { return d.y; });  

     yScale = d3.scale.ordinal() 
      .domain(months) 
      .rangeRoundBands([0, height], .1); 

     // Set x, y and colors 
    /* var y = d3.scale.ordinal() 
     .domain([0, d3.max(dataset, function(d) { 
      return d3.max(d, function(d) { 
      return d.y; 
      }); 
     })]) 
     .rangeRoundBands([height, 0], 0.02); 

     var x = d3.scale.linear() 
      .domain(dataset[0].map(function(d) { 

      return d.x0 + d.x; 
     })) 
     .range([10, width-10]); */ 

     var colors = ["#b33040", "#d9d574"]; 
     var backcolors = ["red", "blue","green","pink"]; 


     // Define and draw axes 
     var yAxis = d3.svg.axis() 
     .scale(yScale) 
     .orient("left"); 

     var xAxis = d3.svg.axis() 
     .scale(xScale) 
     .orient("bottom").ticks(5) 
     .tickSize(-width, 0, 0); 
    /* .tickFormat(function(d) { 
      return 0 
     });*/ 
     // .tickFormat(d3.time.format("%Y")); 

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

     svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis).attr("transform", "rotate(-0)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end"); 


     // Creating the Average Bar for the Semester 
     svg.selectAll(".bar1").data(orangeData).enter().append("g") 
     .attr("class", "bar1").append("rect") 
     .attr("y", function(d) { 
      return y(d.year) ; // center it 
     }) 
     .attr("width", x.rangeBand()) // make it slimmer 
     .attr("x", function(d) { 
      return x(d.oranges); 
     }) 
     .attr("width", function(d) { 
      return width - x(d.oranges); 
     }); 



     // Create groups for each series, rects for each segment in Stacked Bar 
     var groups = svg.selectAll("g.cost") 
     .data(dataset) 
     .enter().append("g") 
     .attr("class", "cost") 
     .style("fill", function(d, i) { 
      return colors[i]; 
     }); 

     var rect = groups.selectAll("rect") 
     .data(function(d) { 
      return d; 
     }) 
     .enter() 
     .append("rect") 
     .attr("y", function(d,y) { 
      return yScale(d.y) + 20 ; 
     }) 
     .attr("x", function(d) { 
      return xScale(d.x0); 
     }) 
     .attr("width", function(d) { 
      return xScale(d.x); 
     }) 
     .attr("height", yScale.rangeBand() -40); 
     } 

Answer 1

Von this answer:

Sie das gesamte Diagramm drehen kann wie folgt:

.attr("transform","rotate(90 200 200)"); 

Se e Ihre aktualisierte Geige: https://fiddle.jshell.net/wtp1qmb2/

Ein paar Dinge in Ihrem Code zu verbessern: nicht mischen JQuery und D3

$("#btn").on("click", function(){ 
    d3.selectAll("svg > g > g").remove(); 
    data[1].mcintosh = (Number(data[1].mcintosh) + 1).toString(); 
    console.log(1,data); 
    update(); 
    }); 

kann

d3.select("#btn").on("click", function(){ 
    // CODE 
}