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)

代码的其余部分为每个tick值附加.grid组的路径，然后最后这段代码将路径的形状定义为从顶部开始并向下延伸到底部的垂直线图表。

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

Answer 2

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

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

2 个答案: