Question

为什么我会得到一个＆＃34;飞入＆＃34;当我尝试在D3中转换字体大小时效果？请参阅我的最小例子：

＆＃13;

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

＆＃13;

这显然不是预期的效果。我只是希望文本在没有大张旗鼓的情况下成长或缩小。在another thread中，其他人定义了自定义补间。这是否意味着没有更简单的方法？我非常惊讶，因为这是一种普通的效果，内置插补器可以很好地处理不透明度和字体粗细。

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

Answer 1

的text-align =＆＃34;中间＆＃34;将文本锚点放在底部中间，这似乎是你想要的。如果链接转换，它们将按顺序运行。

＆＃13;

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

＆＃13;

Answer 2

因为你需要先指定一个字体大小，所以会发生飞入效果。我最近碰到了那个。尝试在转换之前添加此内容：

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

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

Answer 3

使用线性缓动来平滑过渡。

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

Answer 4

D3不支持CSS过渡。

相反，你应该使用：

    @EnableScheduling
    public class SchedulingProjectApplication {

    private static final Logger log = 
    LoggerFactory.getLogger(SchedulingProjectApplication.class);

    public static void main(String[] args) {
        SpringApplication.run(SchedulingProjectApplication.class, args);
    }

    @Scheduled(fixedDelay = 6000)
    public void r()
    {
        log.info("Start- main-job");
        log.info("stop-main-job");
    }

    }

D3字体大小转换

4 个答案: