私のグラフにy軸の一部しか表示されていません

私は単純な棒グラフをプロットするのに困っています。 y軸のごく一部だけが私のグラフに示している：私のグラフにy軸の一部しか表示されていません

私が間違って何をしているのですか？

あなたが widthと height ...

var height = 400; 
var width = 500;

を設定している何らかの理由で

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <style> 
     .bar { 
     fill: steelblue; 
     } 

     .bar:hover { 
     fill: brown; 
     } 

     .axis--x path { 
     display: none; 
     } 
    </style> 
    <title>My bar chart</title> 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
    </head> 
    <body> 
    <script> 
     var myData = [{"y":0.31,"x":"Worse","color":"#e41a1c"},{"y":0.36,"x":"Equivalent","color":"#377eb8"},{"y":0.33,"x":"Better","color":"#4daf4a"}] ; 

     console.log("myData: ", myData); 

     var height = 400; 
     var width = 500; 

     var margin = {left:50,right:50,top:40,bottom:0}; 

     var y = d3.scaleLinear().rangeRound([height, 0]); 

     var x = d3.scaleBand().rangeRound([0, width]).padding(0.1); 

     var yAxis = d3.axisLeft(y); 
     var xAxis = d3.axisBottom(x); 

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


     var g = svg.append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

     x.domain(myData.map(function(d) { return myData.x; })); 

     y.domain([0, 1]); 

     g.append("g") 
      .attr("class", "axis axis--x") 
      .attr("transform", "translate(0," + height + ")") 
      .call(d3.axisBottom(x)); 


     g.append("g") 
      .attr("class", "axis axis--y") 
      .call(d3.axisLeft(y).ticks(10, "%")) 
      .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", "0.71em") 
      .attr("text-anchor", "end") 
      .text("Probability"); 

     g.selectAll(".bar") 
     .data(myData) 
     .enter().append("rect") 
      .attr("class", "bar") 
      .attr("x", function(d) { return x(d.x); }) 
      .attr("y", function(d) { return y(d.y); }) 
      .attr("width", x.bandwidth()) 
      .attr("height", function(d) { return height - y(d.y); }); 

    </script> 


    </body> 

</html>

出典

2017-11-21 Ignacio

、...しかし、...のパーセンテージを使用して、

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

をSVGを追加

..これは変です。だから、この答えのために、私はあなたが実際にパーセンテージを使いたいと思っています。

ここでの問題は、あなたがコンテナ（ <body>）の高さを定義していないことから、SVGの高さは150ピクセルにデフォルト設定されます、ということです

：

var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", "100%") 
 
    .attr("height", "100%") 
 
    .style("background-color", "red"); 
 

 
console.log("The height is: " + svg.style("height"))

<script src="https://d3js.org/d3.v4.min.js"></script>

一つの可能な解決策体の高さを設定しています：

html, 
body { 
    height: 100%; 
}

デモ：

は

var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", "100%") 
 
    .attr("height", "100%") 
 
    .style("background-color", "red"); 
 
    
 
console.log("The height is: " + svg.style("height"))

html, 
 
body { 
 
    height: 100%; 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script>

この はまったく最小値を保証するものではないことに注意して持っています。小さなスニペットウィンドウでは、ちょうど220pxになっています。

出典

2017-11-21 22:46:38

私のグラフにy軸の一部しか表示されていません

答えて

関連する問題