D3 Переход на счет - PullRequest
Новая
       11

D3 Переход на счет

0 голосов
/ 24 июня 2018

Новичок здесь. Я строю гистограмму 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);

Любая помощь будет принята с благодарностью

1 Ответ

0 голосов
/ 24 июня 2018

Переход простого текста приведет только к тому, что конечное значение будет отображаться в начале перехода (после любой задержки):

Для каждого выбранного элемента, для текстового содержимого устанавливается указанное целевое значение при переходеначинается..... Текст по умолчанию не интерполируется, потому что это обычно нежелательно.( документы ).

Вот пример этого на работе: 

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-таймер.Есть также несколько других вариантов, но они не так просты.

Подросток принимает два аргумента.Первый аргумент - это имя изменяемого свойства.Второй аргумент - это значение анимации, которое возвращает функцию в виде: 

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>

Я только что использовал округление, чтобы сохранить форматированное число, в противном случае десятичные точки становятся довольно неприятными.Вы всегда можете применить фактическое форматирование.

...