D3 字体大小转换答案

【问题标题】：D3 font-size transitionD3 字体大小转换
【发布时间】：2016-10-23 16:36:19
【问题描述】：

当我尝试在 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 中，其他人定义了一个自定义补间。这是否意味着没有更简单的方法？我会感到非常惊讶，因为这是一种司空见惯的效果，并且内置的插值器可以很好地处理不透明度和字体粗细。

另外，如果我定义了一个自定义补间，这是否意味着我当前拥有的其他内置过渡（不透明度等）需要排队，因为在给定时间只能在一个元素上激活一个过渡？

【问题讨论】：

@RobertLongson 好的，我编辑了问题以回应您的评论。

标签： javascript d3.js transition

【解决方案1】：

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>

【讨论】：

我认为 OP 在问为什么过渡以这么大的字体开始
但它还在飞！我的意思是文本开始时与 svg 框架一样大，然后缩小到指定的大小。我希望 1em 增长到 2em 就像你在给气球充气一样，然后又回到就像你正在放气一样。
你的意思是这样的？
我的意思是更像this，但您已经向我展示了使用.attr 而不是.style 代替font-size 是可行的方法。非常感谢。

【解决方案2】：

使用线性缓动实现平滑过渡。

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

【讨论】：

【解决方案3】：

D3 不支持 CSS 过渡。

你应该使用：

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

【讨论】：

Please format your text properly

【解决方案4】：

飞入效果发生是因为您需要先指定字体大小。我最近遇到了。尝试在过渡之前添加：

.style('font-size', 'Nem')

N = 您的起始字体大小。并坚持使用 style() 或 attr() 作为您的字体选项，因为混合 2 也会导致问题。

【讨论】：