変更方法D3 v4の水平棒グラフから垂直棒グラフへ

D3には水平棒グラフがありますが、水平ではなく垂直棒グラフを使用したいと思います。ここには、今のようなものがあります。私はX軸とY軸を手に入れようとしましたが、それは正しいとは言えません。どんな助けでも大歓迎です。あなたは、xとy以上のものを変更する必要が変換のこのタイプの変更方法D3 v4の水平棒グラフから垂直棒グラフへ

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Layered Bar Chart</title> 
 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 
</head> 
 
<body> 
 
<script> 
 
var dataArray = [10, 20, 40, 60]; 
 

 
var canvas = d3.select("body") 
 
    .append("svg") 
 
     .attr("width", 500).attr("height", 500); 
 

 
var bars = canvas.selectAll("rect") 
 
    .data(dataArray) 
 
    .enter() 
 
    .append("rect") 
 
     .attr('class', 'base') 
 
     .attr("width", function(d){ 
 
      return d * 10; 
 
     }) 
 
     .attr("height", 30) 
 
     .attr("y", function(d, i){ 
 
      return i * 35; 
 
     }) 
 
     .attr("fill", "blue"); 
 
     //.attr("fill-width", "green"); 
 
     
 
/* 
 
canvas.append("text") 
 
    .text(function(d){ 
 
     return d; 
 
    }).attr; 
 
*/ 
 

 
var dataArray1 = [5, 10, 20, 30]; 
 

 
var bars1 = canvas.selectAll("rect.addon") 
 
    .data(dataArray1) 
 
    .enter() 
 
    .append("rect") 
 
     .attr('class', 'addon') 
 
     .attr("width", function(d){ 
 
      return d * 7; 
 
     }) 
 
     .attr("height", 20) 
 
     .attr("y", function(d, i){ 
 
      return (i*35) + 5; 
 
     }) 
 
     .attr("fill", "red"); 
 
     //.attr("fill-width", "black"); 
 

 
</script> 
 
</body> 
 
</html>

出典

2017-11-01 Vasan Ponnaiyah

あなたがする必要があります：1.変更のドメインおよび範囲を含むスケール、。 2.軸ジェネレータと軸のグループを変更する。 3.長方形の 'x'、' y'、 'height'、' width'属性の論理を変更します。楽しむことがたくさんあります。 –

返信いただきありがとうございますGerardo.Couldあなたは上記のコードを見つけて、私は変更する必要がありますコードで言及してください。ありがとう。これは私をたくさん助けます。 –

私はすでに何を変更する必要があるかを教えました。 –

。あなたの例のコードを使用し

、グラフの形状は、4つの各矩形の特性によって決定されるであろう：x、y、width、及びheight。後は、（一般的に）縦棒グラフは各棒の高さが同じではなく、横棒グラフは同じ高さになります。

第2に、ほとんどの縦棒グラフは下に固定された矩形を持ち、ほとんどの横棒グラフは左に固定された矩形を持ちます。したがって、単純にxとyととheightをスワップすると、バーが下に達する棒グラフになりますグラフの上から

これを解決するには、各矩形のy属性を変更する必要があります。 y属性は矩形の上部を設定するため、各矩形の上部を把握する必要があります。あなたのコードの場合：

.attr("y", function(d,i) { return heightOfSVG - heightOfRectangle; }) // bottom of rectangle - rectangle height = rectangle top

この行は、デフォルトのゼロを使用する代わりに、元のコードでx属性を設定しなかったので新しいものです。これは、矩形の頂点がy = 0（ほとんどの場合）になることができないため、垂直グラフでは実行されません。

もちろん、スケールを使用すると、ラベル付きの軸や複数の棒グラフなどが複雑になります。私はコードを提供したので、これを使用しました。私はあなたの例を1つのチャートに取り除いたのに対し、2つではなく、スケールレスグラフの最小例にそのような変更がどのように見えるかを示しています。

var canvas = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", 500).attr("height", 500); 
 

 
var bars = canvas.selectAll("rect") 
 
    .data([10, 20, 40, 60]) 
 
    .enter() 
 
    .append("rect") 
 
     .attr("height", function(d){ 
 
      return d * 10; 
 
     }) 
 
     .attr("width", 30) 
 
     .attr("x", function(d, i){ 
 
      return i * 35; 
 
     }) 
 
     .attr("y", function(d,i) { return 500 - d * 10; }) 
 
     .attr("fill", "blue");

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

出典

2017-11-01 04:14:12

Andrewに感謝します。これは実際に私が欲しい –

変更方法D3 v4の水平棒グラフから垂直棒グラフへ

答えて

関連する問題