틱 텍스트 속성을 재설정하지 않고 D3 축을 전환하는 방법은 무엇입니까?

Question

나는 화면의 왼쪽을 따라 시간 축을 그리는 D3 프로젝트를 가지고있다. D3 전환을 사용하고 있으므로 윈도우 크기를 부드럽게 전환하고 싶습니다. 그러나 축 설정은 진드기 레이블의 "dy"속성을 변경하여 즉시 진드기 레이블이 아래로 점프 한 다음 SVG가 전환 될 때마다 원래 위치로 다시 전환합니다. 진드기 텍스트의 "dy"속성을 축 호출의 일부로 설정하거나 전환하는 더 좋은 방법이 될 수있는 방법이 있습니까?

내 초기 (일회성) 축 설정 :

var timeScale = d3.time.scale().domain([minTime, maxTime]); 
var yAxis = d3.svg.axis().scale(timeScale).tickFormat(d3.time.format("%-m/%-d %-I:%M%p")).orient("right"); 

나는/전환에게 내가 사용하고있어 SVG 요소를 업데이트하는 기능을 가지고있다. 처음으로 SVG를 그릴 때 init은 true로 설정되고, 그 후에는 false로 설정됩니다.

function updateSVG(init) {   
    ... 
    timeScale.rangeRound([topPadding, svgHeight]); 
    // Use a transition to update the axis if this is an update 
    var t = (init) ? svgContainer : svgContainer.transition().duration(750); 
    // {1}: Create Y axis 
    t.select("g.axis").call(yAxis); 
    // {2}: Move Y axis labels to the left side 
    t.selectAll("g.tick > text") 
     .attr("x", 4) 
     .attr("dy", -4); 
    ... 
} 

{1}의 업데이트에서 눈금 레이블은 모두 이전 attr() 호출에서 "dy"속성이 "-4"입니다. {2}에서 축을 적용하면이 요소의 "dy"속성이 기본값 인 ".32em"으로 재설정 된 후 천천히 다시 "-4"로 전환되어 창이 크기가 조정되고 지터가 올라가고 축 다시 그립니다. 여기

는이 결과 상자의 크기를 조정할 y 축에 점프를 보여줍니다 JSFiddle 작업, 몇 픽셀로 크기를 조정하고 명백해야한다입니다 :

Answer 1

http://jsfiddle.net/YkDk4/1/ 그냥이 알아 냈어. "dy"속성 대신 "transform"속성을 적용하면 axis call()이 값을 덮어 쓰지 않습니다. 그래서 :

t.selectAll("g.tick > text") 
    .attr("x", 4) 
    .attr("transform", "translate(0,-4)"); 

를 모든 것이 원활하게 전환 :

t.selectAll("g.tick > text") 
    .attr("x", 4) 
    .attr("dy", -4); 

이된다.

Answer 2

텍스트 앵커 특성으로이 문제에 대한 응답에서 만든 버그 수정에있어서, 상기 DY 속성이 전환시 즉시 업데이트 할 예정 ...하지만처럼

How to tweak d3 axis attributes when transition is present?

은 그렇지 않아 보인다 . 은 "바운스"를 피해야한다

t.select(".y") 
.call(yAxis); 

chartSvg.selectAll(".y g.tick > text") 
.attr("dy", -4); 

: 어떤 경우에

, 가장 쉬운 해결책은 전환 밖으로 DY 업데이트을 직접 적용하는 것입니다.