d3轴底部带衬垫

Question

我想在图表底部显示两个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 <= x <= 20}），我都惊讶地总是得到以下结果：

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

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

Answer 1

在玩完之后，我发现放height - 1的原因导致第二轴上升到顶部。原因是由于存在减号，Javascript会尝试将字符串的开头键入一个数字，然后将其添加到height - 1，从而导致NaN作为变换属性。

因此，来自

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

我把它改成了

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

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