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なし）はクリミア例と水平コードを組み合わせますまたは複数の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を使用して積み重なった棒グラフを作成する際の助けが必要

答えて

関連する問題