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のための例を見つけましたが、（私はクロスフェードをしたくないので）それは複雑、不必要なようで、バージョン4の.active方法が必要です。 .htmlが.textに置き換えられていると "うまくいきますが、実際には内容を解析する必要があります。

出典

2016-06-24 bongbang

そして.htmlのは、移行のための機能ではありません。 .text – Klaujesi

に変更するjQuery.animate（）を使用するのは簡単ではありませんか？両方（D3とjQuery）は問題なく共存できます。 – Klaujesi

d3.transitionには.html()メソッドがないことが判明しました。これは、docs hereにはtransition.htmlがないことで確認されます。 innerHtml値の継続的な移行を意味するものを解釈する明白な方法がないことを考慮しても、全く予期しないことではありませんが、.html()を遷移させるのと同じ方法で.remove()はです。すなわち、移行の終わりには、非連続的に、右に）。

まあまあです。あなたはまだ.each("end", function() {})メカニズムを使用して、あなたは本質的移行の終わりに加入することにより、やりたいことができます。

<!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：素晴らしい...助けて嬉しいです。なぜ答えを受け入れないのですか？ – meetamit

私は解決策が本当に私のために働くことを確かめようとしていました（明らかに、指が交差しました）。ところで、なぜ '.transition（）。transition（）'？ – bongbang

D3：遷移中にhtmlを変更する

答えて

関連する問題