Как исправить при добавлении переходов это не меняет непрозрачность кругов так же, как когда нет переходов - PullRequest
Новая
       15

Как исправить при добавлении переходов это не меняет непрозрачность кругов так же, как когда нет переходов

0 голосов
/ 08 мая 2019

Мне нужно изменить непрозрачность круга на нескольких прогонах. когда переход не используется, это нормально. но когда используется переход, кажется, что переход останавливается.

Я только вчера начал использовать d3.js и хотел показать свой прогресс в стрельбе из лука.

Итак, кто-то сказал, что я могу создать цель и анимировать непрозрачность каждого кольца. Я уже добавил эти кольца в svg, а затем в d3 я просто вызвал их и перебрал каждый элемент массива данных. затем добавьте непрозрачность в круг, связанный с этим элементом. он работает нормально, но когда я начал добавлять переход, кажется, он не заканчивает добавлять прозрачность.

Я попытался проверить значение непрозрачности до и после перехода, и кажется, что непрозрачность сбрасывается (0,2). если нет перехода, он просто добавляет прозрачность без проблем.

вот jsfiddle https://jsfiddle.net/vdbseyj2/

Я использую версию 5 в своем коде, но у jsfiddle есть только v4, но проблема все та же. 

<svg width="660" height="660">
      <circle  id="ring7" fill="red" stroke-width="1" stroke="black" cx="330" cy="330" r="328" style="opacity:.2"></circle>

      <circle fill="white" stroke-width="1" stroke="black" cx="330" cy="330" r="246"></circle>
      <circle id="ring8" fill="red" stroke-width="1" stroke="black" cx="330" cy="330" r="246"style="opacity:.2"></circle>

      <circle fill="white" stroke-width="1" stroke="black" cx="330" cy="330" r="164"></circle>
      <circle id="ring9" fill="yellow" stroke-width="1" stroke="black" cx="330" cy="330" r="164"style="opacity:.2"></circle>

      <circle fill="white" stroke-width="1" stroke="black" cx="330" cy="330" r="82" ></circle>
      <circle id="ring10" fill="yellow" stroke-width="1" stroke="black" cx="330" cy="330" r="82" style="opacity:.2"></circle>

      <circle fill="white" stroke-width="1" stroke="black" cx="330" cy="330" r="41" ></circle>
      <circle id="ringx" fill="yellow" stroke-width="1" stroke="black" cx="330" cy="330" r="41" style="opacity:.2"></circle>
    </svg>

выше svg и ниже скрипт 


data = [[8,8,7,9,8,10],[8,9,7,"x","x",8]];
var t = d3.transition()
    .duration(50)
    .ease(d3.easeLinear);
var svg = d3.selectAll('circle')
    .data(data)
    .each(function(d,i){
        d.forEach(function(e){
        var cur = d3.selectAll('#ring'+e);
        var op = Number(cur.style("opacity"));
        op += .13;
        cur
        .transition(t)
        .style("opacity",op);
      });
    });

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

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

теоретически это должно показать, что внешние кольца обычно пульсируют в начале и медленно идут к внутренним кольцам.

...