轴上的转换 - 丢失网格线（ticksize），如何按正确的顺序转换？

Question

我有一个水平条形图，在x轴上有过渡。它几乎就是我想要的样子。

可悲的是，红色网格线（tickSize（-h））位于后面。我需要将它们带到前面。

代码在这里：http://bl.ocks.org/greencracker/1cb506e7375a2d825e24

我对过渡很新，我怀疑我是以错误的顺序打电话。

有关网格线的任何建议和/或建议如何干掉此代码？它确实不是DRY，但我从简单的婴儿步骤开始。关键部分：

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

 } 

Answer 1

这是因为你在初始化轴之前错过了初始化条形图，你可以在initAxes（）之前添加init条形码代码并保持所有其他代码不变。

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