d3.js：軸上のティック間にテキストラベルを整列する

Question

ティックの間にテキストラベルを配置する簡単な方法はありますか？ここで

は目盛りの上のラベルと私の時間軸である：

私はここのようにこれらのラベルを配置したいと思います：

Answer 1

私はLars Kotthoff's advicesの一つになってしまいました。

いつも私はcall(axis)でもテキストラベルを調整します。

function renderAxis() { 
    axisContainer 
     .transition().duration(300) 
     .call(axis)     // draw the standart d3 axis 
     .call(adjustTextLabels);  // adjusts text labels on the axis 
} 

function adjustTextLabels(selection) { 
    selection.selectAll('.major text') 
     .attr('transform', 'translate(' + daysToPixels(1)/2 + ',0)'); 
} 

// calculate the width of the days in the timeScale 
function daysToPixels(days, timeScale) { 
    var d1 = new Date(); 
    timeScale || (timeScale = Global.timeScale); 
    return timeScale(d3.time.day.offset(d1, days)) - timeScale(d1); 
} 

更新：ここ
がコードに簡略化されて、私は多くの場合、積層することにより、これを行うhttp://bl.ocks.org/oluckyman/6199145

Answer 2

簡単な（すなわち内蔵）方法はありませんあなたはそれを達成することができます。いくつかのオプションがあります。最も単純なのはおそらく、tickFormat functionを使用して、数字の前後に適切な数のスペースを持つフォーマットを指定することです。しかし、これはそれぞれのアプリケーションに合わせて手作業でチューニングする必要があります。

また、ラベル要素が描画された後にラベル要素を選択し、それに応じて適切なラベル要素を追加することもできます。繰り返しますが、これは手動で調整する必要があります。

3つ目のオプションは、ティック用とラベル用の2つの異なる軸を持つことです。考え方は、ダニを提供する軸にはラベルがなく、もう1つはダニがないことです。チック値を適切に設定する必要がありますが、少なくとも正しいオフセットを推測する必要はありません。

Answer 3

axis.tickSize(major[[,minor],end])と.tickSubdivide()を使用してこれを行うことができます。あなたのダニはメジャーダニと整列するように設定されていますが、これらのダニの高さを0に設定し、マイナーダニの高さを設定し、メジャーダニの各ペアの間にマイナーダニが1つあると指定すると、あなたのダニの間に目盛りのラベルが付いています。あなたのコードは次のようになります：

var myAxis = d3.svg.axis() 
    .ticks(15) 
    .tickSubdivide(1) 
    .tickSize(0, 6, 0); 

エンド・サイズを明示的に設定する必要があることに注意してください。あなたが唯一の2つの数値を提供する場合、彼らは0

にデフォルト設定されますmajorとendとminorとして解釈されます。ここだfiddle.

Answer 4

：ところで
、ここで私が終わったカレンダーのデモです複数の軸があり、それぞれカスタム.tickFormat()です。

@timeDaysAxisLabels = d3.svg.axis() 
    .scale(@timescale) 
    .orient('bottom') 
    .ticks(d3.time.hour.utc, 12) # I want ticks at noon, easiest to just get them ever 12 hours 
    .tickFormat((d) => 
     # only draw labels at noon, between the date boundaries 
     if d.getUTCHours() == 12 
      # draw the label! 
      formatter = d3.time.format.utc('%a %d %b') # "Mon 12 Apr" 
      return formatter(d) 
     else 
      # not noon, don't draw anything 
      return null) 
    .tickSize(0) 
    .tickPadding(30) 

は私もまったくラベルを持つ別の軸を作成します、と非ゼロ.tickSize()：私は日付の間にラベルを配置することだ場合

、私はしばしばこのような何かをやります実際にはダニを描くことができますが、上記のブロックは日付のラベルを "列"の中央に配置します。

Answer 5

すでにいくつかの返信がありますが、もう1つ追加するだけです。 text-anchorの使用に注意してください。

同じ考え方：通話後、テキストを選択して、位置を変更します。

.call(xAxis)     
.selectAll(".tick text") 
.style("text-anchor", "start") 
.attr("x", axisTextAdjust) 

Answer 6

 svg.append("g") 
      .attr("class", "axis axis-years") 
      .attr("transform", "translate(0," + (height + 1) + ")") 
      .call(xAxis) 
     .selectAll("text") 

    .attr("x", "-1.8em") 
    .attr("y", ".00em") 
    .attr("transform", function (d) { 
     return "rotate(-90)"});