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을 사용하여 숫자 앞뒤에 적절한 수의 공백이있는 형식을 지정하는 것입니다. 각 응용 프로그램마다 손으로 조정해야합니다.

또는, 당신은 그들이 그려 한 후 라벨 요소를 선택하고 그에 따라 그들을 이동 적절한 transform 속성을 추가 할 수 있습니다. 다시 말하지만, 이것은 손으로 조정해야합니다.

세 번째 옵션은 눈금과 레이블을위한 두 개의 다른 축을 갖는 것입니다. 아이디어는 틱을 제공하는 축에는 레이블이 없으며 다른 축에는 틱이 없다는 것입니다. 틱 값을 적절하게 설정해야하지만 최소한 올바른 오프셋을 추측 할 필요는 없습니다.

Answer 3

당신은 axis.tickSize(major[[,minor],end]) 및 .tickSubdivide()를 사용하여이 작업을 수행 할 수 있습니다. 틱은 큰 틱과 정렬되도록 설정되어 있지만이 틱의 높이를 0으로 설정하고 작은 틱의 높이를 설정하고 각 틱의 두 쌍 사이에 하나의 작은 틱이 있다고 지정하면 종료됩니다 틱간에 틱 레이블이 붙어 있습니다. 코드는 다음과 같습니다.

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

최종 크기를 명시 적으로 설정해야합니다. 당신은 단지 두 개의 숫자를 제공하는 경우, 그들은 0

로 설정됩니다 major 및 end 및 minor으로 해석됩니다 여기 fiddle.

Answer 4

: BTW
, 여기에 내가 끝내 일정 데모입니다 각 축은 각각 사용자 지정 .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) 

가 나는 또한 전혀 레이블 별도의 축을 만들 것이다, 0이 아닌 .tickSize() : 나는 날짜 사이에 라벨을 배치하고있어 경우

, 나는 종종 이런 식으로 뭔가를 할 수 있습니다 진드기를 실제로 그리기 위의이 블록은 날짜 열의 레이블을 "열"의 가운데에 배치합니다.

Answer 5

이미 몇 가지 좋은 답변이 있지만 하나만 더 추가하십시오. 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)"});