d3軸が表示されない

Question

実際に私の棒グラフに軸を表示するのに問題があります。これまでのところ、私は何が間違っているのか見当たりません。スケーリングとは何か？

軸のレンダリングは行われていますが、バーによって切り取られていますか？

<script type="text/javascript"> 


    //Width and height 
    var w = 850; 
    var h = 650; 
    var barpadding = 20; 


    var dataset = [40, 99]; 


    //Create SVG element 
    var svg = d3.select(".wrapper") 
      .append("svg") 
      .attr("width", w) 
      .attr("height", h); 

    //Create scale functions 
    var x = d3.scaleBand() 
      .range([0, w]) 
      .padding(0.1); 
    var y = d3.scaleLinear() 
      .range([h, 0]); 


    svg.selectAll("rect") 
      .data(dataset) 
      .enter() 
      .append("rect") 
      .attr("x", function (d, i) { 
       return i * (w/dataset.length); 
      }) 
      .attr("y", function (d) { 
       return h - (d * 4); 
      }) 
      .attr("width", w/dataset.length - barpadding) 
      .attr("height", function (d) { 
       return d * 4; 
      }) 
      .attr("fill", "dodgerblue"); 

    svg.selectAll("text") 
      .data(dataset) 
      .enter() 
      .append("text") 
      .text(function (d) { 
       return d; 
      }) 
      .attr("text-anchor", "middle") 
      .attr("x", function (d, i) { 
       return i * (w/dataset.length) + (w/dataset.length - barpadding)/2; 
      }) 
      .attr("y", function (d) { 
       return h - (d * 4) + 14; 
      }) 
      .attr("font-family", "sans-serif") 
      .attr("font-size", "18px") 
      .attr("fill", "black"); 

    d3.select(".axis") 
      .call(d3.axisBottom(x)); 

</script> 

Answer 1

軸を表示するには、最初に<g>要素を追加する必要があります。その後軸が常に原点（0,0）で生成されているので、あなたは軸を呼び出し、だけにして、それを翻訳し、する必要があります：

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

私は正常に動作デモを提供していますが、あなたのコードは、いくつかの問題を抱えているので、私は、それをスキップします。この時間：

• は、それはそれはそれは、マジックナンバーを使用してバーをしない位置
• スケールのドメインを欠い軸
• のマージンが欠けていますスケール

しかし、軸の下に20pxの軸を表示する場合は、次のようになります。https://jsfiddle.net/qcnako3g/