D3 过渡到计数

Question

新手来了 我正在构建一个 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);

任何帮助将不胜感激

Answer 1

转换纯文本只会导致在转换开始时显示结束值（在任何延迟之后）：

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

这是工作中的一个例子：

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。还有其他一些选择，但它们不那么直接。

补间需要两个参数。第一个参数是被修改的属性的名称。第二个参数是一个补间值，它返回以下形式的函数：

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

其中t是一个介于 0 和 1 之间的数字，表示过渡的进度（0 = 开始，1 = 结束），并且 interpolator 是一些函数，用于为过渡中的任何点插入过渡值。对于 d3，这可能是一个 d3 插值器。

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

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

我只是使用四舍五入来保持数字格式，否则小数点会变得非常讨厌。你总是可以应用一些实际的格式。