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

Question

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

.x-axis path {
    fill: none;
}

你可以在轴的左边和右边看到小线。

这是因为<path>元素仍然具有高度，您可以使用其d-attribute进行更改。有没有人知道用 d3 来改变轴高的选项？

在HTML中它看起来像这样：

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

我可以（并且现在就这样做）改变轴的比例范围，但是这个（认真对待）也改变了蜱的位置。所以我的最后一个选择是粗鲁的HTML / SVG-hack。有什么建议吗？我是否会错过d3 axis-API中的内容？

如果您对JS感兴趣，我可以发布创建轴的方法，整个图表管理近800行。

/*
  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
  }
};

Answer 1

您可以使用axis.tickSize()功能，特别是.tickSize([0,0])没有勾号。

.tickSize([])会产生略微不同的结果，它会在轴线和刻度线的<text>元素之间留下最小的空间。

您还可以使用.outerTickSize()分别控制结尾“刻度”的大小。