Сочетание переходов в d3

Question

Как можно добавить два перехода к непрерывному переходу в D3 без прерывания первого? Для иллюстрации проблемы я создал jsbin. В примере одна кнопка запускает переход для увеличения ширины прямоугольника, а другая кнопка запускает переход, чтобы повернуть его красным.

function changeFill() { 
    d3.select("rect") 
    .transition() 
    .duration(4000) 
    .style("fill", "red"); 
} 

function changeSize(){ 
    d3.select("rect") 
    .transition() 
    .duration(4000) 
    .attr("width","300"); 
} 

Если две кнопки нажаты последовательно (вторая нажата до конца первого перехода) второй переход прерывает текущий первый. Как можно объединить два перехода, чтобы они могли заканчиваться в нужных конечных точках?

Answer 1

Просто назовите свои переходы. Предоставляя переходы другим именам, один и тот же элемент может иметь разные переходы без последнего перехода, отменяющего первый переход.

function changeFill() { 
 
    d3.select("rect") 
 
    .transition("transition1")//name here 
 
    .duration(5000) 
 
    .style("fill", "red"); 
 

 
} 
 

 
function changeSize(){ 
 
    d3.select("rect") 
 
    .transition("transition2")//different name here 
 
    .duration(5000) 
 
    .attr("width","300"); 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<button onclick="changeFill()">Change fill</button> 
 
<button onclick="changeSize()">Change size</button> 
 
<p> 
 
<svg width="500" height="150"> 
 
    <rect width="30" height="30"></rect> 
 
</svg>