Маркировка анимированных графиков линий с использованием D3

Question

Я новичок в D3, и я столкнулся с проблемой, которую я не могу решить.

Я построил анимированный линейный график, используя this tutorial, и теперь я пытаюсь добавить к нему. То, что я думал, было бы крутой идеей, было бы обозначить каждую строку в линейном графике, но пометить ее в конце строки.

Here's what I've come up with so far:

Как вы можете видеть его субоптимальный в лучшем случае. Я неправильно размещаю текст, но не очевидно, как правильно позиционировать его. Вот код, о котором идет речь.

name.transition() 
    .duration(duration) 
    .ease("linear") 
    .attr("transform", function(d) { 
     return "translate(" + (width - margin.left - margin.right) +", " + y(d[n-2]) + ")"; 
    }); 

Кажется, «линейный» ослабление выключен, и это также, кажется, использует другой масштаб в разы.

Есть ли эксперт D3 (или новичок), готовый научить меня правильному способу этого?

Answer 1

Там, кажется, две проблемы:

1. .interpolate("basis") - вы с использованием линейной интерполяции для заголовка, но B-сплайн интерполяция пути. Комментируя эту строку, вы держите заголовок довольно жестким с вашей линией передачи данных (хотя он также разглаживает линию - возможно, это хорошо для большинства графиков данных).

2. «Скачки» при изменении масштаба оси. Это связано с тем, что заголовок переходит к новой позиции на новом шкале, но его исходное положение по-прежнему задано относительно старого масштаба, поэтому оно может начинаться выше или ниже линии, которую он отслеживает. Я думаю, что вы можете это исправить, добавив прямую .attr установки, прежде чем начать переход, чтобы зафиксировать исходное положение заглавия:

   name 
       .attr("transform", function(d) { 
        return "translate(" + 
         (width - margin.left - margin.right) +", " + y(d[n-2]) + ")" 
       }) 
       .transition() 
       // etc 
   

См http://jsbin.com/uvayof/2