D3フォントサイズの変更

D3でフォントサイズを変更しようとすると「フライイン」効果が得られるのはなぜですか？私の最小限の例を参照してください：D3フォントサイズの変更

<!DOCTYPE html> 
 
<title>Test text transtion</title> 
 

 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"> 
 
</script> 
 

 
<body> 
 
    <button>Toggle</button> 
 
    <script> 
 
    var svg = d3.select('body').append('svg') 
 
    var myLabel = svg.append('text') 
 
     .attr('y', 100) 
 
     .text('Watch me.'); 
 
    var toggle = false; 
 
    d3.selectAll('button').on('click', function() { 
 
     toggle = !toggle; 
 
     myLabel.transition() 
 
     .style('font-size', toggle ? '2em' : '1em'); 
 
    }); 
 
    </script> 
 
</body>

明らかに所望の効果ではないこと。私はちょうどテキストが大きく広がることなく、その場所で成長したり収縮したりしたい。 another threadでは、他のユーザーがカスタムトゥイーンを定義しています。それは容易な方法がないということですか？私はこれが普通の効果であり、組み込みの補間器が不透明度とフォントウェイトをうまく処理するので、非常に驚くだろう。

カスタムトゥイーンを定義している場合、ある時点で1つのトランジションだけがアクティブになることができるため、現在の他のビルトイントランジション（不透明度など）がキューに入れられる必要がありますか？

出典

2016-06-21 bongbang

@RobertLongsonさて、私はあなたのコメントに反応して質問を編集しました。 – bongbang

text-align = "middle"はテキストのアンカーポイントを下の中央に配置します。トランジションを連鎖させると、連続して動作します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<!DOCTYPE html> 
 
<title>Test text transtion</title> 
 

 
<script type="text/javascript" 
 
    src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"> 
 
</script> 
 
<body> 
 
<button>Toggle</button> 
 
<script> 
 
var svg = d3.select('body').append('svg') 
 
var myLabel = svg.append('text') 
 
    .attr('x', 80) 
 
    .attr('y', 100) 
 
    .attr('text-anchor', 'middle') 
 
    .attr('font-size', '1em') 
 
    .text('Watch me.'); 
 
var toggle = false; 
 
d3.selectAll('button').on('click', function() { 
 
    toggle = !toggle; 
 
    myLabel.transition() 
 
     .attr('font-size', '2em') 
 
     .duration(500) 
 
     .transition() 
 
     .attr('font-size', '1em') 
 
     .duration(500); 
 
}); 
 
</script> 
 
</body>

出典

2016-06-21 23:37:20

私はOPがそのような大きなフォントで始まる理由を質問していると思います – Fabricator

しかし、それはまだ飛んでいる！これで、テキストはsvgフレームと同じくらい大きくなり、指定されたサイズに縮小されます。風船を膨らませているかのように '1em'が' 2em'に成長し、風を吐き出しているかのように戻るようにしたい。 – bongbang

このような意味ですか？ –

使用スムーズな移行のための線形イージング。

d3.selectAll('button').on('click', function() { 
    toggle = !toggle; 
    myLabel.transition() 
     .attr('font-size', toggle ? '2em' : '1em') 
     .ease('linear')

出典

2016-06-22 01:19:23

D3ではCSSの移行がサポートされていません。

代わりにあなたが使用する必要があります。

.attr('font-size', FONT_SIZE);

出典

2017-11-20 08:39:53 Jason

[テキストを正しくフォーマットしてください]（https://stackoverflow.com/editing-help） – Dwhitz

D3フォントサイズの変更

答えて

関連する問題