Javascript 轴上的过渡--丢失网格线（ticksize），如何以正确的顺序过渡？

我有一个水平条形图，在x轴上有一个过渡。它看起来正是我想要的，几乎

不幸的是，红色网格线（tickSize（-h））在后面。我需要把他们带到前线

代码如下：

我是个新手，我怀疑我打错电话了

对前面的网格线有什么建议和/或对如何干燥此代码有什么建议？这是相当不干燥，但我从简单的婴儿步骤开始。关键部分：

d3.csv("georgia_counties_vmt.csv", function(input) {
    data = input;
    data.forEach(function(d) { d.value = +d.value; });
    data.forEach(function (d) {d.n1 = +d.n1; })
    data.sort(function(a, b) { return b.value - a.value; });

    x.domain([0, d3.max(data, function(d) { return d.value; })]);
    y.domain(data.map(function(d) { return d.name; }));

    initAxes(); // draws tiny axes that transition into proper size
    change(); // calls redraw()

// skip some, then: 

function redraw() {
     // unrelated bar drawing stuff here:

    //calls regular-size axes
    svg.selectAll("g.y_axis").call(yAxis)
    svg.selectAll("g.x_axis").call(xAxis)

}


function initAxes() // initializes axes with range at [0,1]
{
   var initXscale = d3.scale.linear()
      .range([0, 1])
      .domain([0, d3.max(data, function(d) { return d.value; })]);

   var initXaxis = d3.svg.axis()
      .scale(initXscale)
      .tickSize(-h)
      .orient("top");

  svg.append("g")
     .attr("class", "x_axis")
     .call(initXaxis);   

 var initYscale = d3.scale.ordinal()
   .rangeBands([0, 1], 0.1)
   .domain(data.map(function(d) { return d.name; }));

 var initYaxis = d3.svg.axis()
    .scale(initYscale)
    .orient("left")
    .tickSize(0);

  svg.append("g")
    .attr("class", "y_axis")
    .call(initYaxis);

 } 

---

这是因为在初始化轴之前没有初始化条，所以可以在initAxes（）之前添加init bar代码，并保持所有其他代码不变

d3.csv("georgia_counties_vmt.csv", function(input) {

  ...
  y.domain(data.map(function(d) { return d.name; }));

  initBars(); // init bars before init axes
  initAxes();
  change(); 


}); // close d3.csv ...

...

// new added function to init bars
function initBars() {
  var bar = svg.selectAll("g.bar")
      .data(data)
      .attr("class", "bar");

  var barEnter = bar.enter().append("g")
    .attr("class", "bar")
    .attr("transform", function (d) {return "translate(0," + (d.y0 = (y(d.name))) +")" ;});

  barEnter.append("rect")
    .attr("width", 0)
    .attr("height", y.rangeBand()/2);
}

---

我怀疑您添加网格线的顺序可能是问题所在。您正在初始化X轴和Y轴，然后绘制水平条。在svg中，添加到元素（如

g

）的任何内容都位于先前添加的元素之上。