Question

我有两个补间数据标签的函数。第一个称为.on(mouseenter,...，第二个称为.on(mouseout,...。第一个函数使数据标签字体大小更大，第二个函数应该将其恢复为正常大小。两者都是使用.transition()和.duration(500)完成的。

function text_event(id) {
  d3.selectAll(".data_label")
    .filter(function (d) {
      return (d.id == id);
    })
      .transition()
      .styleTween('font', function() {return d3.interpolate('12px Calibri', '20px Calibri' )
      .duration(500);
}

function text_event2(id) {
  d3.selectAll(".data_label")
    .filter(function (d) {
      return (d.id == id);
    })
      .transition()
      .styleTween('font', function() {return d3.interpolate('20px Calibri', '12px Calibri' )
      .duration(500);
}

问题是，如果你足够快地鼠标进出，第二个功能实际上会使字体再次变大。与现在一样，在20px处一直开始转换，d3是否有一种方法可以根据转换中字体大小的位置开始转换回正常大小？

Answer 1

初始化插补器时，您必须将实际值设置为起始值，而不是使用静态结束值12px或20px。通过使用d3.select(this).style("font")：

检索值可以轻松完成此操作

return d3.interpolate(d3.select(this).style("font"), '20px Calibri' )

看看这个工作示例：

＆＃13;

d3.selectAll("text")
  .on("mouseenter", text_event)
  .on("mouseleave", text_event2);
  
function text_event() {
  d3.selectAll(".data_label")
    .transition()
      .styleTween('font', function() {
        return d3.interpolate(d3.select(this).style("font"), '20px Calibri' )
      })
      .duration(500);
}

function text_event2() {
  d3.selectAll(".data_label")
    .transition()
      .styleTween('font', function() {
        return d3.interpolate(d3.select(this).style("font"), '12px Calibri' )
      })
      .duration(500);
}

＆＃13;

<script src="https://d3js.org/d3.v4.js"></script>

<svg>
  <text x="100" y="100" class="data_label" style="font: 12px Calibri;">Test</text>
</svg>

＆＃13;

平滑补间字体大小

1 个答案: