javascript - 如何在 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-axis 会自动创建一条连接外部 2 个刻度线和轴线的路径。在您的情况下，您已使用 d3-axis 创建网格。我假设这条路径在底部覆盖了你的轴线。要检查是否属于这种情况，我建议您使用浏览器的开发人员工具检查您的 DOM。

无论如何，问题在于您不应使用 d3 Axis 来创建网格，而应为每条网格线创建一条路径。您创建网格的方式是一种 hack，这就是为什么您会在顶部看到一条线。所以我会摆脱:

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;})