D3 font-size Übergang

Warum bekomme ich einen "Fly-in" -Effekt, wenn ich versuche, Schriftgröße in D3 zu überführen? Siehe mein minimal Beispiel:D3 font-size Übergang

<!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>

die offensichtlich nicht die gewünschte Wirkung ist. Ich möchte nur, dass der Text ohne viel Fanfare an Ort und Stelle wächst oder schrumpft. In another thread definiert jemand anderes ein benutzerdefiniertes Tween. Bedeutet das, dass es keinen leichteren Weg gibt? Ich wäre sehr überrascht, weil dies ein alltäglicher Effekt ist und der eingebaute Interpolator die Deckkraft und das Schriftgewicht gut verarbeitet.

Auch wenn ich ein benutzerdefiniertes Tween definiere, bedeutet das, dass die anderen eingebauten Übergänge, die ich aktuell habe (Opazität usw.), in die Warteschlange gestellt werden müssen, da nur ein Übergang zu einem bestimmten Zeitpunkt aktiv sein kann?

Quelle

2016-06-21 bongbang

@RobertLongson Okay, ich bearbeitet die Frage als Antwort auf Ihren Kommentar. – bongbang

text-align = "middle" wird den Text-Ankerpunkt in die untere Mitte setzen, was hier zu sein scheint. Wenn Sie Übergänge ketten, arbeiten sie sequentiell.

<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>

Quelle

2016-06-21 23:37:20

Ich denke, das OP fragt, warum der Übergang mit einer so großen Schrift beginnt – Fabricator

Aber es fliegt immer noch rein! Damit meine ich, dass Text so groß wie der Svg-Frame beginnt und dann auf die angegebene Größe reduziert wird. Ich möchte, dass der '1em' zu' 2em' anwächst, als würde man einen Ballon aufblasen, und dann zurück, als würde man die Luft auslassen. – bongbang

Sie meinen so? –

Verwenden linear für einen reibungslosen Übergang zu erleichtern.

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

Quelle

2016-06-22 01:19:23

D3 unterstützt keine CSS-Transition.

Stattdessen sollten Sie verwenden:

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

Quelle

2017-11-20 08:39:53 Jason

[Formatieren Sie bitte Ihren Text richtig] (https://stackoverflow.com/editing-help) – Dwhitz

D3 font-size Übergang

Antwort

Verwandte Themen