d3.jsのX軸線を上から下に変更するには

Question

私はd3.jsを初めて使用していますが、私のX軸線が上に、下にはない（下の画像をご覧ください）。ここで

私は（コードの量を減らすために簡略化）を使用しているコードです：

var data = []; 
var days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; 
for(var i = 0; i<7; i++){ 
    data.push({"letter":i,"frequency":Math.random(), "day":days[i]}) 
} 



var svg = d3.select("#graph1"), 
    margin = {top: 80, right: 20, bottom: 100, left: 100}, 
    width = +svg.attr("width") - margin.left - margin.right, 
    height = +svg.attr("height") - margin.top - margin.bottom; 


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

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


    x.domain([0,1]); 
    y.domain(data.map(function(d) { return d.day; })); 

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

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



     //setup the tool 

    g.append("g")   
    .attr("class", "grid") 
    /*.attr("transform", "translate("+margin.left+"," + margin.top + ")")*/ 
    .call(d3.axisBottom(x) 
     .ticks(5) 
     .tickSize(height) 
     .tickFormat("") 
     ); 



var thickness = 14; 
g.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", 0) 
    .attr("y", function(d) { return y(d.day) + thickness/2 ;}) 
    .attr("width", function(d) { return x(d.frequency);}) 
    .attr("height", thickness); 

Answer 1

申し訳ありませんが、私はあなたの質問に誤解しました。問題は、d3軸が外側の2ティックと軸線を結ぶパスを自動的に作成することです。あなたの場合は、グリッドを作成するためにd3軸を使用しています。私は、このパスがあなたの軸線を底に覆っていると仮定します。このような場合は、ブラウザの開発者ツールでDOMを検査することをお勧めします。

とにかく、問題は、d3軸を使用してグリッドを作成する代わりに、各グリッド線のパスを作成することです。あなたがグリッドを作ったやり方は、ハックです。そして、あなたがトップラインを見ている理由です。だから私は取り除くになります。次の場合は

g.append("g")   
    .attr("class", "grid") 
    .call(d3.axisBottom(x) 
     .ticks(5) 
     .tickSize(height) 
     .tickFormat("")); 

：

var grid = g.append("g").attr("class","grid"); 
grid.selectAll("path") 
    .data(x.ticks(5)) 
    .enter().append("path") 
    .attr("d", function(d) {return "M"+x(d)+",0v"+height;}); 

クイック説明

これは、例えばダニ値の配列を作成します[0,20,40、...]：

x.ticks(5) 

コードの残りの部分は各目盛り値に対して.gridグループへのパスを追加され、そして最後に、このコードは、ASパスの形状を定義して上から始まり、チャートの下に行く垂直線。

.attr("d", function(d) {return "M"+x(d)+",0v"+height;}) 

Answer 2

あなたは一番上の行は、x軸から実際にあることを確認しています？あなたのX軸のパスが無効になっているように見えます（おそらくCSS経由 - 多くの人がグラフの軸のパスを無効にするので、他の例から貼り付けたコピーを作成している可能性があります）。唯一の謎は、上部のグレーラインがどこから来ているかです。おそらく、svg要素のためのいくつかのCSSスタイリング？それでも問題を解決できない場合は、JSFiddleまたはplunkerを投稿すると便利です。