x軸をsvgの下に移動するには

javascriptを使用してバープロットを作成しようとしています。私はバープロットを作成しましたが、2つの軸を追加したいと思います。現在、x軸に固定されています。x軸をsvgの下に移動するには

x軸をバープロットの下に移動できません。私はsvgを調整するためにd3を使用しています。私は現在、それをトップに展示することができますが、一番下にそれを示したいと思います。

すべての入力は便利です！

これまでのところ私の試みはtransformを使用していましたが、私がこの軸を実行すると私の軸は消えます。

グーグルでは他のソリューションもありますが、いずれも成功していません。

コード：

<script> 

d3.json("data_week3.json", function(data){ 

    var data_renewables = []; 
    var data_nations = []; 

    for (i = 0; i < data.length; i++) 
    { 
     data_renewables.push(data[i].Renewable); 
     data_nations.push(data[i].Nation) 
    } 

    var width = 1000, 
    height = 500; 

    var y = d3.scale.linear() 
     .domain([0, d3.max(data_renewables)]) 
     .range([height, 0]); 

    var chart = d3.select(".chart") 
     .attr("width", width) 
     .attr("height", height); 

    var barWidth = width/data_renewables.length; 

    var bar = chart.selectAll("g") 
     .data(data_renewables) 
     .enter().append("g") 
     .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; }); 

    bar.append("rect") 
     .attr("y", function(d) { return y(d); }) 
     .attr("height", function(d) { return height - y(d); }) 
     .attr("width", barWidth - 1); 

    bar.append("text") 
     .attr("x", barWidth/2) 
     .attr("y", function(d) { return y(d); + 3; }) 
     .attr("dy", ".75em") 
     .text(function(d) { return d; }); 

    var axisScale = d3.scale.linear() 
     .domain([0, 30]) 
     .range([0, 1000]); 

    var xAxis = d3.svg.axis() 
     .scale(axisScale) 
     .orient("bottom"); 

    chart.append("g") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

}) 

</script>

出典

2017-11-15 Floris Holstege

あなたは働くフィドルを提供できますか？ –

svgスペースの外側に印刷されている可能性があります。コンソールログがDOMに追加されているかどうかを確認できますか？軸とそのラベルに対応するために、グラフとsvg境界の間に余白を追加することができます。 –