누적 막대 그래프의 방향을 D3에서 수직에서 수평으로 변경

Question

반응 형 누적 막 대형 차트의 방향을 수직에서 수평으로 변경하고 있지만 here과 같은 스택 오버 플로우의 몇 가지 다른 예에 이어 아무것도 변경되지 않았습니다. here.

이

당신은 전체 그래프를 회전 할 수 있습니다 : 이 여기 누적 막대 그래프 을 포함는 fiddle

내 수직 누적 막대 그래프에 대한 코드 그러나 현재 작업 코드는 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

this answer에서입니다 이렇게 :

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

전자 업데이트 된 바이올린 : https://fiddle.jshell.net/wtp1qmb2/

몇 가지 코드 개선하기 : JQuery와 및 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(); 
    }); 

는 [D3js의

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