D3过渡动画计数器

Question

D3过渡动画计数器

3

新手在此。我正在构建一个D3条形图，已经能够使条形高度动画化; 但是，每个条形旁边都有一个显示值的文本字段，我无法使文本随条形增长而计数。

我正在使用 .text 属性，我认为问题就出在这里:

g.selectAll(".myText")
      .transition()
      .text(function(d){return (d.m6+"%")}) //code for counting from previous d.m6 value?
      .attr("transform", function(d) { ...code for moving text location...)
      .duration(700)
      .ease(d3.easeLinear);

任何帮助都将不胜感激

- suhail

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew Reid · Accepted Answer

将纯文本转换只会导致在转换开始时显示最终值（在任何延迟之后）:

对于每个选定的元素，在过渡开始时将文本内容设置为指定的目标值....默认情况下不插值文本，因为这通常是不希望的。（文档）。

以下是此示例的示例：

var svg = d3.select("body")
  .append("svg");
  
var text = svg.append("text")
  .attr("x", 50)
  .attr("y", 50)
  .text(1);
  
text.transition()
  .text(1000)
  .duration(1000)
  .delay(1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

然而，您可以插值文本，最经典的方法是使用transition.tween()（文档）。虽然您也可以使用.attrTween甚至d3-timer。还有一些其他选项，但它们不太直观。

tween接受两个参数。第一个参数是被修改的属性名称。第二个参数是一个tween值，返回以下形式的函数：

return function(t) { interpolator(t); })

在过渡中，t是0到1之间的数字，表示过渡的进度（0=开始，1=结束），而interpolator是一些用于插值过渡值的函数。使用d3时，这可能是一个d3-interpolator。

var svg = d3.select("body")
  .append("svg");
  
var text = svg.append("text")
  .attr("x", 50)
  .attr("y", 50)
  .text(1);
  
text.transition()
  .tween("text", function() {
     var selection = d3.select(this);    // selection of node being transitioned
     var start = d3.select(this).text(); // start value prior to transition
     var end = 1000;                     // specified end value
     var interpolator = d3.interpolateNumber(start,end); // d3 interpolator

     return function(t) { selection.text(Math.round(interpolator(t))); };  // return value
     
  })
  .duration(10000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>

我刚使用了四舍五入来保持数字格式化，否则小数点会显得非常讨厌。您可以随时应用一些实际的格式化。