D3 字体大小过渡

Question

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>

Run Code Online (Sandbox Code Playgroud)

这显然不是想要的效果。我只是想让文本在没有大张旗鼓的情况下就地增长或缩小。在另一个线程中，其他人定义了一个自定义补间。这是否意味着没有更简单的方法？我会感到非常惊讶，因为这是一种司空见惯的效果，而且内置的插值器可以很好地处理不透明度和字体粗细。

此外，如果我定义了一个自定义补间，是否意味着我当前拥有的其他内置转换（不透明度等）将需要排队，因为在给定时间只有一个转换可以在元素上处于活动状态？

Answer 1

Rob*_*son 4

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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，2 月前
查看次数：	2590 次
最近记录：	7 年，3 月前