沿轴过渡-丢失网格线(ticksize)，如何以正确的顺序过渡? [英] Transition on axis -- losing grid lines (ticksize), how to transition in correct order?

问题描述

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

I've got a horizontal bar graph with transition on the x-axis. It looks exactly how I want, almost.

可悲的是，红色网格线(tickSize(-h))在后面.我需要把它们带到最前面.

Sadly, the red gridlines (tickSize(-h)) are in the back. I need to bring them to the front.

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

我是过渡的新手，我怀疑自己打错电话的顺序.

I'm new to transitions and I suspect I'm calling something in the wrong order.

关于网格线的任何建议和/或建议如何干燥此代码?它不是很干，但是我从简单的步骤开始.关键部分:

Any suggestions on gridlines to front and/or suggestions how to DRY this code? It is fairly not DRY, but I'm starting with easy baby steps. Key parts:

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

This is because you missed initializing the bars before initializing the axis, you can add init bars code before initAxes() and keep all your other codes no change.

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

这篇关于沿轴过渡-丢失网格线(ticksize)，如何以正确的顺序过渡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！