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

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

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

这是工作中的一个例子：

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()（documentation）。虽然您可以使用.attrTween甚至是d3-timer。还有其他一些选择，但不太直接。

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

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

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

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>

我只是使用舍入来保持数字的格式，否则小数点会令人讨厌。您总是可以应用一些实际的格式。

D3转换以递增计数

1 个答案: