在序数轴上改变退出变换

Question

这是一个简单的轴转换效果示例，您可以对序数比例进行排序。当您点击“交换项目”时，此功能非常有效。当数据更改包含新项目或删除项目时，默认行为将淡入淡出。当您点击“更改项目”时，您可以在代码段中看到此行为。

这是明智的，适用于大多数情况。但是当新项目进入和离开轴时我想执行不同的动画 - 例如，已移除的项目从轴的底部过渡而新的项目向上滑动。我无法想象在哪里挂钩代码，允许现有元素的行为继续，同时改变对添加和删除项目的淡入/淡出效果。

如何做到这一点？

＆＃13;

＆＃13;

var fruit1 = [
    ['Apple', 10],
    ['Orange', 15],
    ['Bananas', 7],
    ['Kiwi', 11],
    ['Mangosteen', 3],
    ['Sapodilla', 9]
  ],
  fruit2 = [
    ['Bananas', 7],
    ['Kiwi', 11],
    ['Mangosteen', 3],
    ['Sapodilla', 9],
    ['Durian', 11],
    ['Jack Fruit', 2]
  ],
  toggle = false;

var margin = {
    top: 20,
    right: 60,
    bottom: 20,
    left: 170
  },
  width = 200 - margin.left - margin.right,
  height = 200 - margin.top - margin.bottom

var y = d3.scaleBand()
  .range([0, height])
  .padding([0.1]),
  yAxis = d3.axisLeft(y)

var svg = d3.select("#chart").append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append('g')
  .attr('class', "y axis")
  .call(yAxis)

function update(data) {
  y.domain(data.map(d => d[0]))

  svg.select('.y')
    .transition()
    .duration(750)
    .call(yAxis)
}

function swap() {
  d = toggle ? fruit2 : fruit1
  for (let i = d.length; i; i--) {
    let j = Math.floor(Math.random() * i);
    [d[i - 1], d[j]] = [d[j], d[i - 1]];
  }
  update(d)
}

function change() {
  d = toggle ? fruit1 : fruit2
  toggle = !toggle
  update(d)
}

update(fruit1)

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.js"></script>
<div id="chart"></div>
<button onclick="swap()">Swap Items</button>
<button onclick="change()">Change Items</button>

＆＃13;

＆＃13;

＆＃13;