d3.js를 사용하여 스택 막 대형 차트를 만드는 데 도움이 필요합니다

현재이 스택 형 막 대형 차트 (mbostock.github.com/d3/ex/stack.html)를 d3.js를 사용하여 가로 누적 막 대형 차트로 변환하려고합니다 그러나 나는 운이 없었습니다. 누구든지 d3.js의 가로 막대 그래프의 예가 있거나 다음 코드를 올바르게 수정하는 방법을 알고 있거나 올바른 방향으로 나를 가리켜 주면 큰 도움이 될 것입니다.d3.js를 사용하여 스택 막 대형 차트를 만드는 데 도움이 필요합니다

var margin = 20, 
width = 960, 
height = 500 - .5 - margin, 
mx = m, 
my = d3.max(data, function(d) { 
    return d3.max(d, function(d) { 
    return d.y0 + d.y; 
    }); 
}), 
mz = d3.max(data, function(d) { 
    return d3.max(d, function(d) { 
    return d.y; 
    }); 
}), 
x = function(d) { return d.x * width/mx; }, 
y0 = function(d) { return height - d.y0 * height/my; }, 
y1 = function(d) { return height - (d.y + d.y0) * height/my; }, 
y2 = function(d) { return d.y * height/mz; }; // or `my` to not rescale 

var vis = d3.select("#chart") 
.append("svg") 
.attr("width", width) 
.attr("height", height + margin); 

var layers = vis.selectAll("g.layer") 
.data(data) 
.enter().append("g") 
.style("fill", function(d, i) { return color(i/(n - 1)); }) 
.attr("class", "layer"); 

var bars = layers.selectAll("g.bar") 
.data(function(d) { return d; }) 
.enter().append("g") 
.attr("class", "bar") 
.attr("transform", function(d) { return "translate(" + x(d) + ",0)"; }); 

bars.append("rect") 
.attr("width", x({x: .9})) 
.attr("x", 0) 
.attr("y", height) 
.attr("height", 0) 
.transition() 
.delay(function(d, i) { return i * 10; }) 
.attr("y", y1) 
.attr("height", function(d) { return y0(d) - y1(d); });

출처

2012-05-13 John

-1

프랭크 Guerino의 예를보십시오 : http://bl.ocks.org/2141479 - 수평 막대 차트 및 이 http://bl.ocks.org/2354192 - 여러 D3 위쪽에서 아래쪽으로 (d3.layout.stack없이) 바닥까지 스택 막 대형 차트 는 크림 예제를 수평 코드를 결합 또는 Multiple D3 Top Down 예를 들어 트랙에 있어야합니다. 주로 찾고자하는 것은 수평 설정에서 좌표를 계산하는 방법입니다. 나머지는 다른 스택 예제와 동일합니다. 감사합니다.

출처

2012-05-13 10:42:12 paxRoman

는 또한 이것 좀보세요. com/forum/#! searchin/d3-js/horizontal $ 20stack/d3-js/NnIK9weFbQg/gQhUQlNtdz4J – paxRoman

트릭은 수직 스택 막대 차트와 거의 동일하게 취급하지만 스태킹 전에 x 값과 y 값을 반전 한 다음 다시 스태킹합니다. 아래 코드의 주석을 참고하십시오. 이것에 대해

내 블로그 게시물 : 아래 코드의 http://datashaman.github.io/2014/01/26/horizontal-stacked-bar-chart-d3/

데모 : http://bl.ocks.org/datashaman/8621955

jsFiddle : https://groups.google : http://jsfiddle.net/datashaman/rBfy5/2/

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <style> 
     .bar { 
     } 
     .axis path, 
     .axis line { 
      fill: none; 
      stroke: black; 
      shape-rendering: crispEdges; 
     } 
     .axis text { 
      font-family: sans-serif; 
      font-size: 11px; 
     } 

     #tooltip { 
      position: absolute; 
      text-align: center; 
      width: 40px; 
      height: auto; 
      padding: 10px; 
      background-color: white; 
      -webkit-border-radius: 10px; 
      -moz-border-radius: 10px; 
      border-radius: 10px; 
      -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
      -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
      box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
      pointer-events: none; 
     } 

     #tooltip.hidden { 
      display: none; 
     } 

     #tooltip p { 
      margin: 0; 
      font-family: sans-serif; 
      font-size: 16px; 
      line-height: 20px; 
     } 
     </style> 
    </head> 
    <body> 
     <script src="http://d3js.org/d3.v3.min.js"></script> 

     <div id="tooltip" class="hidden"> 
      <p><span id="value">100</span></p> 
     </div> 

     <script> 
     var margins = { 
       top: 12, 
       left: 48, 
       right: 24, 
       bottom: 24 
      }, 
      legendPanel = { 
       width: 240 
      }, 
      width = 700 - margins.left - margins.right - legendPanel.width, 
      height = 100 - margins.top - margins.bottom, 
      dataset = [ 
       { 
        data: [ 
         { month: 'Aug', count: 123 }, 
         { month: 'Sep', count: 234 }, 
         { month: 'Oct', count: 345 } 
        ], 
        name: 'Series #1' 
       }, 
       { 
        data: [ 
         { month: 'Aug', count: 235 }, 
         { month: 'Sep', count: 267 }, 
         { month: 'Oct', count: 573 } 
        ], 
        name: 'Series #2' 
       } 

      ], 
      series = dataset.map(function(d) { return d.name; }), 
      dataset = dataset.map(function(d) { 
       return d.data.map(function(o, i) { 
        // Structure it so that your numeric 
        // axis (the stacked amount) is y 
        return { 
         y: o.count, 
         x: o.month 
        }; 
       }); 
      }), 
      stack = d3.layout.stack(); 

     stack(dataset); 

     var dataset = dataset.map(function(group) { 
      return group.map(function(d) { 
       // Invert the x and y values, and y0 becomes x0 
       return { 
        x: d.y, 
        y: d.x, 
        x0: d.y0 
       }; 
      }); 
     }), 
     svg = d3.select('body') 
      .append('svg') 
       .attr('width', width + margins.left + margins.right + legendPanel.width) 
       .attr('height', height + margins.top + margins.bottom) 
      .append('g') 
       .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'), 
     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; }), 
     _ = console.log(months), 
     yScale = d3.scale.ordinal() 
      .domain(months) 
      .rangeRoundBands([0, height], .1), 
     xAxis = d3.svg.axis() 
      .scale(xScale) 
      .orient('bottom'), 
     yAxis = d3.svg.axis() 
      .scale(yScale) 
      .orient('left'), 
     colours = d3.scale.category10(), 
     groups = svg.selectAll('g') 
      .data(dataset) 
      .enter() 
      .append('g') 
       .style('fill', function(d, i) { 
        return colours(i); 
       }), 
     rects = groups.selectAll('rect') 
      .data(function(d) { return d; }) 
      .enter() 
       .append('rect') 
        .attr('x', function(d) { return xScale(d.x0); }) 
        .attr('y', function(d, i) { return yScale(d.y); }) 
        .attr('height', function(d) { return yScale.rangeBand(); }) 
        .attr('width', function(d) { return xScale(d.x); }) 
        .on('mouseover', function(d) { 
         var xPos = parseFloat(d3.select(this).attr('x'))/2 + width/2; 
         var yPos = parseFloat(d3.select(this).attr('y')) + yScale.rangeBand()/2; 

         d3.select('#tooltip') 
          .style('left', xPos + 'px') 
          .style('top', yPos + 'px') 
          .select('#value') 
          .text(d.x); 

         d3.select('#tooltip').classed('hidden', false); 
        }) 
        .on('mouseout', function() { 
         d3.select('#tooltip').classed('hidden', true); 
        }) 

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

     svg.append('g') 
      .attr('class', 'axis') 
      .call(yAxis); 

     svg.append('rect') 
      .attr('fill', 'yellow') 
      .attr('width', 160) 
      .attr('height', 30 * dataset.length) 
      .attr('x', width + margins.left) 
      .attr('y', 0); 

     series.forEach(function(s, i) { 
      svg.append('text') 
       .attr('fill', 'black') 
       .attr('x', width + margins.left + 8) 
       .attr('y', i * 24 + 24) 
       .text(s); 
      svg.append('rect') 
       .attr('fill', colours(i)) 
       .attr('width', 60) 
       .attr('height', 20) 
       .attr('x', width + margins.left + 90) 
       .attr('y', i * 24 + 6); 
     }); 
    </script> 
</body> 
</html>

출처

2014-01-26 20:00:31 datashaman

이 차트에서 어떻게 정렬 할 수 있습니까? –

d3.js를 사용하여 스택 막 대형 차트를 만드는 데 도움이 필요합니다

답변

관련 문제