D3 font-size переход

Почему я получаю эффект «влета» при попытке изменить размер шрифта в D3? Смотрите мой минимальный пример:D3 font-size переход

<!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 кто-то определяет пользовательскую анимацию. Означает ли это, что нет более простого способа? Я был бы очень удивлен, потому что это обычный эффект, и встроенный интерполятор отлично справляется с непрозрачностью и шрифтом.

Также, если я определяю пользовательскую анимацию, означает ли это, что другие встроенные переходы I, имеющие ток (непрозрачность и т. Д.), Должны быть поставлены в очередь, так как только один переход может быть активным в элементе в данный момент времени?

источник

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

Я думаю, что ОП спрашивает, почему переход начинается с такого большого шрифта – 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 font-size переход

ответ

Смежные вопросы