d3.js：我如何获得'；全宽'；y轴上的记号

我正在使用这个可重复使用的柱状图，但做了一些修改：

/*d3.js的可重用柱状图*/
/*    https://gist.github.com/llad/3766585  */
函数柱状图（）{
var margin={顶部：30，右侧：10，底部：50，左侧：50}，
宽度=420，
高度=420，
xRoundBands=0.2，
xValue=函数（d）{返回d[0]；}，
yValue=函数（d）{返回d[1]；}，
xScale=d3.scale.ordinal（），
yScale=d3.scale.linear（），
xFormat=“”，
yFormat=“”，
yAxis=d3.svg.axis（）.scale（yScale）.orient（“左”），
xAxis=d3.svg.axis（）.scale（xScale）；
功能图（选择）{
选择。每个功能（数据）{
//贪婪地将数据转换为标准表示；
//这对于不确定的访问器是必需的。
data=data.map（函数（d，i）{
return[xValue.call（数据，d，i），yValue.call（数据，d，i）]；
});
//更新x刻度。
xScale
.domain（data.map（函数（d）{返回d[0]；}））
.rangeRoundBands（[0，宽度-边距.左-边距.右]、xRoundBands）；
//更新y刻度。
yScale
.domain（d3.extent（data.map（函数（d）{返回d[1]；}）））
.范围（[height-margin.top-margin.bottom，0]）
.nice（）；
//选择svg元素（如果存在）。
var svg=d3.select（this.selectAll（“svg”）.data（[data]）；
//否则，创建骨架图。
var gEnter=svg.enter（）.append（“svg”）.append（“g”）；
附加（g）属性（类、条）；
gEnter.append（“g”）.attr（“类”，“y轴”）；
gEnter.append（“g”）.attr（“class”，“x轴”）；
gEnter.append（“g”）.attr（“类”，“x轴零”）；
//更新外部尺寸。
svg.attr（“宽度”，宽度）
.attr（“高度”，高度）；
//更新内部尺寸。
var g=svg。选择（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//更新栏。
var bar=svg.select（“.bar”）.selectAll（“.bar”）.data（数据）；
bar.enter（）.append（“rect”）；
bar.exit（）.remove（）；
attr（“类”，函数（d，i）{返回d[1]<0？“条负”：“条正”；}）
.attr（“x”，函数（d）{返回x（d）；}）
.attr（“y”，函数（d，i）{返回d[1]<0？Y0（）：y（d）；}）
.attr（“宽度”，xScale.rangeBand（））
.attr（“height”，函数（d，i）{return Math.abs（Y（d）-Y0（）；}）
.on（“点击”），功能（d，i）
{
d3.选择全部（'.bar'）。分类（'fade'，true）；
d3.选择（此）.classed（“sel”，真）。classed（“fade”，假）；
})
.on（“鼠标悬停”，功能（d，i）
{
d3.选择（this）.classed（“悬停”，true）；
})
.on（“mouseout”，函数（d，i）
{
d3.选择（此）.classed（“悬停”，false）；
});
//图表底部的x轴
g、 选择（“x轴”）
.attr（“变换”、“平移（0）”+（高度-边距.顶部-边距.底部）+”）
.call（xAxis.orient（“底部”）.tickFormat（xFormat））；
//零线
g、 选择（“.x.axis.zero”）
.attr（“转换”、“平移（0，+Y0（）+”）
.call（xAxis.tickFormat（“”.tickSize（0））；
//更新y轴。
g、 选择（“y轴”）
.呼叫（yAxis）；
});
}
//路径生成器的x访问器；xScale∘ xValue。
函数X（d）{
返回xScale（d[0]）；
}
函数Y0（）{
返回yScale（0）；
}
//路径生成器的x访问器；yScale∘ 价值。
函数Y（d）{
返回yScale（d[1]）；
}
chart.margin=函数（ux）{
if（！arguments.length）返回边距；
利润率=u；
收益表；
};
chart.width=函数{
if（！arguments.length）返回宽度；
宽度=；
收益表；
};
chart.height=函数（ux）{
如果（！arguments.length）返回高度；
高度=；
收益表；
};
chart.x=函数{
如果（！arguments.length）返回xValue；
xValue=u2;；
收益表；
};
chart.y=函数{
如果（！arguments.length）返回yValue；
y值=u0；
收益表；
};
chart.yTickFormat=函数（\u1）{
如果（！arguments.length）返回yFormat；
yFormat=u3;；
收益表；
};
chart.xTickFormat=函数{
如果（！arguments.length）返回xFormat；
xFormat=389;；
收益表；
};
收益表；
}

这是一个很好的小剧本！我添加了xTickFormat和click及mouseover函数

然而，在柱状图上，我喜欢在图表的整个宽度上有微弱的水平线，基本上是将y轴刻度延伸到整个宽度

如何修改yAxis以获得这些全宽线，或者如何选择拥有这些线

谢谢

看看：

---

关键是

.tickSize（）

属性。

这看起来太简单了！接着问一个问题，这样我就可以理解这些部件是如何工作的：轴上的记号（黑色）和构成网格的记号（浅灰色）有什么区别？为什么它不让滴答声变长呢？显然，它们是作为单独的形状生成的。。。但是如何/为什么？好的，再仔细分析一下，我看到你添加的网格与轴是分开的，我可以看到保持它们分开是多么有益。谢谢，好的。您可以选择垂直或水平，或两者兼有。不客气：）请确保在这里使用负数

。tickSize（-innerHeight）
.tickSize（-innerWidth）
/* Reusable column chart for d3.js          */
/*    https://gist.github.com/llad/3766585  */

function columnChart() {
  var margin = {top: 30, right: 10, bottom: 50, left: 50},
      width = 420,
      height = 420,
      xRoundBands = 0.2,
      xValue = function(d) { return d[0]; },
      yValue = function(d) { return d[1]; },
      xScale = d3.scale.ordinal(),
      yScale = d3.scale.linear(),
      xFormat = '',
      yFormat = '',
      yAxis = d3.svg.axis().scale(yScale).orient("left"),
      xAxis = d3.svg.axis().scale(xScale);


  function chart(selection) {
    selection.each(function(data) {

      // Convert data to standard representation greedily;
      // this is needed for nondeterministic accessors.
      data = data.map(function(d, i) {
        return [xValue.call(data, d, i), yValue.call(data, d, i)];
      });

      // Update the x-scale.
      xScale
          .domain(data.map(function(d) { return d[0];} ))
          .rangeRoundBands([0, width - margin.left - margin.right], xRoundBands);


      // Update the y-scale.
      yScale
          .domain(d3.extent(data.map(function(d) { return d[1];} )))
          .range([height - margin.top - margin.bottom, 0])
          .nice();


      // Select the svg element, if it exists.
      var svg = d3.select(this).selectAll("svg").data([data]);

      // Otherwise, create the skeletal chart.
      var gEnter = svg.enter().append("svg").append("g");
      gEnter.append("g").attr("class", "bars");
      gEnter.append("g").attr("class", "y axis");
      gEnter.append("g").attr("class", "x axis");
      gEnter.append("g").attr("class", "x axis zero");

      // Update the outer dimensions.
      svg .attr("width", width)
          .attr("height", height);

      // Update the inner dimensions.
      var g = svg.select("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

     // Update the bars.
      var bar = svg.select(".bars").selectAll(".bar").data(data);
      bar.enter().append("rect");
      bar.exit().remove();
      bar.attr("class", function(d, i) { return d[1] < 0 ? "bar negative" : "bar positive"; })
        .attr("x", function(d) { return X(d); })
        .attr("y", function(d, i) { return d[1] < 0 ? Y0() : Y(d); })
        .attr("width", xScale.rangeBand())
        .attr("height", function(d, i) { return Math.abs( Y(d) - Y0() ); })
        .on("click", function(d, i) 
        {
            d3.selectAll('.bar').classed('fade', true);
            d3.select(this).classed("sel", true).classed("fade", false);
        })
        .on("mouseover", function(d, i) 
        {
            d3.select(this).classed("hover", true);
        })
        .on("mouseout", function(d, i) 
        {
            d3.select(this).classed("hover", false);
        });

    // x axis at the bottom of the chart
     g.select(".x.axis")
        .attr("transform", "translate(0," + (height - margin.top - margin.bottom) + ")")
        .call(xAxis.orient("bottom").tickFormat(xFormat));

    // zero line
     g.select(".x.axis.zero")
        .attr("transform", "translate(0," + Y0() + ")")
        .call(xAxis.tickFormat("").tickSize(0));


      // Update the y-axis.
      g.select(".y.axis")
        .call(yAxis);

    });
  }


// The x-accessor for the path generator; xScale ∘ xValue.
  function X(d) {
    return xScale(d[0]);
  }

  function Y0() {
    return yScale(0);
  }

  // The x-accessor for the path generator; yScale ∘ yValue.
  function Y(d) {
    return yScale(d[1]);
  }

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin = _;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.x = function(_) {
    if (!arguments.length) return xValue;
    xValue = _;
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return yValue;
    yValue = _;
    return chart;
  };

  chart.yTickFormat = function(_) {
    if (!arguments.length) return yFormat;
    yFormat = _;
    return chart;
  };

  chart.xTickFormat = function(_) {
    if (!arguments.length) return xFormat;
    xFormat = _;
    return chart;
  };

  return chart;
}