d3.js在pannable图上改变tick标签的位置

Question

我在d3.js工作并且有两个pannable（但不可缩放）的时间轴。一个轴有几天的标签，一个有几个月的标签。我对两个轴使用相同的比例。

目前，它看起来像这样:(管道和减号仅用于提高可见度）

|November
1 2 3 4 5 6 7 8 9 10 11 12 13 ... 30

我想将月份名称移动到间隔的中间位置，以便它看起来像这样：

|-------------November
1 2 3 4 5 6 7 8 9 10 11 12 13 ... 30

我已经尝试了几种方法来解决问题，但没有成功。核心问题是，当平移时，当刻度本身消失时，刻度线的文本将消失。

1. 如果我使用帖子选择将刻度线的文本移动到正确的位置，则将轴平移到左侧时，文本会过早消失。

   初始（ok）：

   |-------------November
   1 2 3 4 5 6 7 8 9 10 11 12 13 ... 30
   

   向左平移后（错误）：

   (gone)             
   2 3 4 5 6 7 8 9 10 11 12 13 ... 30
   

2. 我试图将间隔更改为“中间”附近的日期。而不是使用

   放置标签

   .ticks(d3.time.months, 1);
   

   我尝试使用以下内容进行设置：

   .ticks(d3.time.days, 15);
   

   但这并没有达到预期的效果。它生成以下内容：

   |November-----November------November
   1 2 3 4 5 6 7 8 9 10 11 12 13 ... 30
   

3. 以下对我没有帮助：

   .style("text-anchor", "end/begin")
   

4. 我找到了一种方法（如本例中所述：http://bl.ocks.org/mbostock/6186172）向轴添加偏移，因此仍会显示太长的刻度。我无法在一个可绘制的图表中使用它。

   var x = d3.time.scale()
       .domain([t0, t3])
       .range([t0, t3].map(d3.time.scale()
             .domain([t1, t2])
             .range([0, width])));
   

有没有更好的工作解决方案？

Answer 1

编写自定义ticks（）函数对我有用。使用它，我可以将tick（和它的标签）设置为任何给定的位置。

我创建了一个简单的要点，向您展示我的解决方案： http://bl.ocks.org/kevinnoll/77430421843b940869ed