如何修改 D3 轴上的刻度和格式标签？

Question

我正在使用this example，但我正在努力寻找如何格式化 x 轴以防止重叠。我相信我遇到的一些困难是由于缩放/平移选项的画笔。我正在尝试将 August 标签向右移动，这样它们就不会与 y 轴重叠。此外，画笔标签完全相互重叠，我也想解决这个问题。

x轴代码

this.xAxisTop = d3.svg.axis().scale(this.xScale).orient("bottom");
this.xAxisBottom = d3.svg.axis().scale(this.xScale).orient("top");

刷码

context.append("g")
    .attr("class", "x brush")
    .call(brush)
    .selectAll("rect")
        .attr("y",0)
        .attr("height", contextHeight);

我尝试通过选择 x 轴并调用 .ticks(5) 来直接修改 x 轴，但它所做的只是返回一堆与轴函数相关的代码。

如果我应该包含更连贯的解释或示例，请告诉我，谢谢！

Answer 1

对于这个问题，我们必须编写自定义刻度格式函数。

在下面的链接中解决了缩放时出现的相同问题。

http://stackoverflow.com/questions/20010864/d3-axis-labels-become-too-fine-grained-when-zoomed-in

以下链接可帮助您直接解决问题

http://jsfiddle.net/BdGv5/3/

三个自定义 javascript 函数可帮助您更改轴格式。