Javascript 如何使用d3.js更改x轴的高度

当我向图表中添加x轴并将其比例范围精确设置为[0-chart.width]时，如果您使用此css：

.x-axis path {
    fill: none;
}

您可以在轴的左边缘和右边缘上看到小线条

这是因为

元素仍然有一个高度，您可以用它的值来改变它。有人知道用d3改变轴高度的选项吗

在HTML中，它如下所示：

<path class="domain" d="M-1,-6V0H1042V-6"></path>

您可以为此使用该函数，尤其是

.tickSize（[0,0]）

，使其没有刻度

.tickSize（[]）

带来了一个稍微不同的结果，它在轴线和ticks的

元素之间留下了最小的空间

---

您还可以使用

.outerTickSize（）

单独控制结束“刻度”的大小。您可以发布生成图表的JS吗？@spanndemic done，我希望这就足够了。是的，这很有效。但是我使用了

.tickSize（[]）

这里可以找到一个最小的例子：

/*
  chartAttrs is an object, which holds some important
  values/attributes of the chart (like its width,
  height, svgRoot and similar chart elements).
*/
var createXAxis = function() {
  if (chartAttrs.width) {
    if (!_.isObject(chartAttrs.xAxis)) {
      chartAttrs.xAxis = {};
    }
    chartAttrs.xAxis.scale = d3.time.scale() //most important here: we use d3 time scale
      .domain(createTimeAxisDomain(false))
      //createTimeAxisDomain creates an array with two date objects (new Date([some_timestamp]))
      .range([-1, chartAttrs.width + 2]);
    chartAttrs.xAxis.axisMeth = d3.svg.axis()
      .scale(chartAttrs.xAxis.scale)
      .orient('top');
    chartAttrs.xAxis.axis = chartAttrs.d3Root.append('g')
      .attr({ 
        'class': 'x-axis',
        'transform': 'translate(0,' + (chartAttrs.height - (chartAttrs.margins.bottom * 3)) + ')' //bad magic number
      })
      .call(chartAttrs.xAxis.axisMeth/*
        .innerTickSize([10])
        .outerTickSize([10])*/);
  } else {
    $log.warn("No chartAttrs.width -> no x axis!", chartAttrs); //AngularJS stuff
  }
};