如何在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組的路徑，然后最終該代碼將路徑的形狀定義為一條垂直線，從頂部開始一直到圖表的底部。

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

Answer 2

您確定頂部的線實際上是從x軸開始的嗎？ 在我看來，您的x軸路徑已禁用（也許通過CSS-非常可能是因為您復制了其他示例中的粘貼內容，因為許多人在其圖表中禁用了軸路徑）。 唯一的謎團是上面的灰線來自哪里……也許​​是svg元素的某些CSS樣式？ 如果仍然無法解決問題，則發布JSFiddle或插件將很有用。