d3 轴底部，带填充答案

【问题标题】：d3 Axis Bottom with Paddingd3 轴底部，带填充
【发布时间】：2016-05-23 03:58:25
【问题描述】：

我想在图表底部显示两个 xAxis，一个放在另一个上方。因此，为了让我的坐标轴位于底部，我在 x1Axis 和 x2Axis 上都指定了 .orient('bottom')。此外，我将transform 属性设置为translate(0, height)，如下所示：

svg.append("g")
  .attr("class", "x1 axis")
  .attr("transform", "translate(0," + height + ")")
  .call(x1Axis);

for(var i = 0 ; i < x1domain.length; i++){
  svg.append("g")
      .attr("class", "x2 axis")
      .attr("transform", "translate("+ (x1.rangeBand()*i*(1/(1-x1padding))+ x1(x1domain[0])) + "," + height + ")")
      .call(x2Axis);
}

正如预期的那样，我最终将两个轴叠加在一起：

因此我将 x1Axis 的 transform 属性修改为 translate(0, height-x) 以将轴向上移动一点。不管 x 的值是多少（尝试 {x | 1

因此我的问题是，我怎样才能让两个轴都在底部，一个在另一个之上？该行为似乎预定义为剪切到顶部或底部。

注意：为了便于讨论，请忽略我正在为我的 x2Axis 打印多个轴的事实。

【问题讨论】：

我在你正在做的一个轴translate(0, height-x) 上没有发现任何令人惊讶的地方，所以轴已经向上移动了。进行平移将相应地移动轴。
如果我写了translate(0, height-height)，那将是预期的行为，但在这种情况下translate(0, height-1)会产生相同的结果
x 的值是多少？好像它大于height，你会得到负的translate's 第二个坐标，即translate(0, -200)。
在这种情况下，我尝试了 { x | 1
从 SO post 修改的 fiddle 重现了相同的行为。 xAxis2 在第 28 行面向底部，组的 translate 属性在第 80 行设置。您将观察到与上述相同的行为。

标签： javascript d3.js charts

【解决方案1】：

玩了一圈才发现，之所以放height - 1，是导致第二个轴往上走。原因是由于存在减号，Javascript 会尝试将字符串的开头类型转换为数字，然后将其添加到 height - 1，从而将 NaN 作为转换属性的值。

因此，从

.attr("transform", "translate(0," + height-1 + ")")

我改成

.attr("transform", "translate(0," + (height-1) + ")")

使用 height-1 周围的额外括号解决类型转换问题。

【讨论】：