D3에서 텍스트 앵커를 애니메이션하는 방법

단어 구름을 단어 목록으로 변환하려고합니다. 나는 그럭저럭 할 수 있었다. 그러나 움직이는 텍스트에 관한 문제에 부딪쳤다. 단어 구름은 text-anchor: middle을 텍스트 위치 지정에 사용하기 때문에 text-anchor: start을 사용하는 목록 레이아웃으로 전환하면 애니메이션이 시작될 때 단어가 조금씩 튀어 나옵니다. 바이올린 아래 관련 코드를 참조하십시오D3에서 텍스트 앵커를 애니메이션하는 방법

jsFiddle

text.transition() 
    .duration(1000) 
    .attr("text-anchor", opts.textAnchor) 
    .attr("transform", function(d) { 
     return "translate(" + [d.x, d.y] + ")"; 
    }) 
    .style("font-size", function(d) { 
      return d.size + "px"; 
    })

내 생각, 내가 수동으로 각 텍스트의 위치를 계산하고 text-anchor: middle 대신 내 자신을 중심으로 텍스트를 작성해야합니다. 하지만 어떻게해야할지 모르겠습니다.

어떤 도움이

출처

2014-05-09 Cihad Turhan

을 감상 할 수있는 가장 좋은 방법은 사용하고 text-anchor 애니메이션을 대신 텍스트를 자신의 중심을 참이다.

.attr("dx", function() { 
    if(opts.textAnchor == "start") { 
    return 0; 
    } else if(opts.textAnchor == "middle") { 
    return -this.getBBox().width/2 + "px"; 
    } 
})

전체 데모 here :이 당신은 단지 텍스트의 폭을 결정해야하고 센터 절반 길이하여 오프셋, 상대적으로 쉽다.

출처

2014-05-09 08:59:53

귀하의 데모에는 원래 jsfiddle과 동일한 문제가 있습니다. – VividD

아, 잘 찾아 냈습니다. 나는 정돈하기 위해 몇 가지 코드를 돌아 다니고 있었다 ... 지금 고쳐 줘서 고마워. –

중간과 시작 텍스트 앵커 사이에서 선형 이징을 사용하여 전환을 사용하면 해당 동작을 조금 더 부드럽게 만들 수 없습니까? – tomtomtom

D3에서 텍스트 앵커를 애니메이션하는 방법

답변

관련 문제