如何在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或插件将很有用。