如何修改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函数可帮助您更改轴格式。