如何在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

您确定顶部的那行实际上来自 x-axis 吗？在我看来，您的 x-axis 路径已被禁用（可能通过 CSS - 如果您从其他示例中复制粘贴，则很有可能因为许多人在他们的图表中禁用了轴路径）。唯一的谜是上面的灰线来自哪里......也许是 svg 元素的一些 CSS 样式？如果您仍然无法解决问题，post JSFiddle 或 plunker 会很有用。

Answer 2

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

无论如何，问题在于您不应使用 d3 轴创建网格，而应为每条网格线创建路径。您创建网格的方式是一种 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;})

如何在d3.js中从上到下改变X轴线

How to change the X-axis line from top to bottom in d3.js

javascript

axis

graph

d3.js