D3 : 전환시 html 변경

이 (깨진) 최소 예에서는 텍스트가 페이드 아웃되고 보이지 않는 동안 변경된 다음 변경된 내용으로 다시 표시하려고합니다. 이것은 단순해야합니다 (교차 페이딩 없음). 그러나 오류 메시지는 .html이 기능이 아니라고 불평합니다. D3 : 전환시 html 변경

<!DOCTYPE html> 
 
<title>Image mask</title> 
 

 
<script type="text/javascript" 
 
    src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"> 
 
</script> 
 
<body> 
 
</body> 
 
<script> 
 
var textbox = d3.select('body').append('div'); 
 

 
textbox 
 
\t .html('Click me.') 
 
\t .style('cursor','pointer'); 
 

 
var i = 0; 
 
textbox.on('click', function() { 
 
\t i++; 
 
\t textbox.transition() 
 
\t \t .style('opacity', 0) 
 
\t .transition().duration(300) 
 
\t .html('Click me. <strong>' + i + '</strong>') 
 
\t .transition().transition() 
 
\t \t .style('opacity', 1); 
 
}); 
 
</script>

PS 나는 cross-fading에 대한 예를 찾을 수 있지만, 복잡한 불필요한 것 (I 크로스 페이딩을 원하지 않기 때문에) 및 버전 4의 .active 방법이 필요합니다.

업데이트..html이 .text으로 바뀌면 "작동"하지만 내용을 파싱해야합니다.

출처

2016-06-24 bongbang

을 그리고 .html 중에서 전환하는 기능되지 않습니다 : 당신은 아직도 당신이 본질적으로의 전환의 끝 부분에 가입 .each("end", function() {}) 메커니즘을 사용하여 수행 할 작업을 할 수 있습니다. .text – Klaujesi

으로 변경하십시오. jQuery.animate()를 사용하는 것이 간단하지 않습니까?. 둘 다 (D3 & jQuery) 문제없이 공존 할 수 있습니다. – Klaujesi

d3.transition에는 .html() 메서드가 없음을 발견했습니다. 이는 docs here에 transition.html이 없음으로 확인됩니다. innerHtml 값의 연속 전환을 의미하는 것을 해석하는 확실한 방법이 없다는 것을 고려하면 전혀 예상하지 못하지만, .html()이 전환되기를 원하는 것과 같은 방식으로 .remove()은이 "전환 가능"입니다 (즉, 전환이 끝날 때 바로 비 연속적으로).

오 잘.

<!DOCTYPE html> 
 
<title>Image mask</title> 
 

 
<script type="text/javascript" 
 
    src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"> 
 
</script> 
 
<body> 
 
</body> 
 
<script> 
 
var textbox = d3.select('body').append('div'); 
 

 
textbox 
 
    .html('Click me.') 
 
    .style('cursor','pointer'); 
 

 
var i = 0; 
 
textbox.on('click', function() { 
 
    i++; 
 
    textbox.transition() 
 
    .style('opacity', 0) 
 
    .each("end", function() { 
 
     d3.select(this) 
 
     .html('Click me. <strong>' + i + '</strong>') 
 
     .transition() 
 
     .style('opacity', 1); 
 
    }) 
 
}); 
 
</script>

출처

2016-06-24 23:07:47 meetamit

감사합니다. 'setTimeout'으로이 작업을하는 방법을 찾았지만 메서드가 더 깨끗해졌습니다 – bongbang

@bongbang : Awesome ... 도와 드리겠습니다. 왜 그 대답을 받아들이지 않습니까? – meetamit

나는 솔루션이 실제로 나를 위해 작동하는지 확인하려고 노력했다. (분명히 손가락이 엇갈린다.) 그런데, 왜 .transition(). transition()? – bongbang

D3 : 전환시 html 변경

답변

관련 문제