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中，其他人定義了一個自定義補間。這是否意味着沒有更簡單的方法？我會很驚訝，因爲這是一個普通的效果，並且內置插入器處理不透明度和字體重量就好了。

此外，如果我定義了一個自定義補間，是否意味着其他內置過渡我當前有（不透明等）將需要排隊，因爲只有一個過渡可以在一個給定的時間元素活躍？

來源

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字體大小轉換

回答

相關問題