javascript - 轴上的过渡 - 丢失网格线(刻度大小)，如何以正确的顺序过渡？

Question

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

遗憾的是，红色网格线(tickSize(-h))位于后面。我需要把他们带到前面。

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

我是过渡新手，我怀疑我以错误的顺序调用了某些内容。

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

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() 之前添加初始化条形代码，并保持所有其他代码不变。

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