Javascript D3转换意外工作

出于某种原因，D3没有在退出时转换div的宽度平滑

在下面的GIF中，我在两个数据集之间切换，从

[20,40]

到

[20]

预期的行为是蓝色div应该平滑收缩，但它会卡住

我应该怎么做

现场示例：

---

这里的问题只是过渡使用的插值

D3可以毫无问题地插入两个字符串，例如

300px

到

20px

。但是，在您的例子中，开始字符串有一个

“%”

，而最后一个字符串有一个

“px”

。D3无法插入，这是可以原谅的：从

“%”到
“px”
的转换是什么

让我们在下面的片段中展示它。在这里，我使用的是：

返回两个字符串a和b之间的插值器。字符串插值器查找嵌入在a和b中的数字，其中每个数字的形式都是JavaScript可以理解的

在第一个演示中，两个字符串都有
“px”
：


var插值器=d3.插值（“300px”，“0px”）；
d3.范围（0,1.1,1）.forEach（函数（d）{
控制台日志（插值器（d））
});
这里的问题只是转换使用的插值

D3可以毫无问题地插入两个字符串，例如
300px
到
20px
。但是，在您的例子中，开始字符串有一个
“%”
，而最后一个字符串有一个
“px”
。D3无法插入，这是可以原谅的：从
“%”到
“px”
的转换是什么

让我们在下面的片段中展示它。在这里，我使用的是：

返回两个字符串a和b之间的插值器。字符串插值器查找嵌入在a和b中的数字，其中每个数字的形式都是JavaScript可以理解的

在第一个演示中，两个字符串都有
“px”
：


var插值器=d3.插值（“300px”，“0px”）；
d3.范围（0,1.1,1）.forEach（函数（d）{
控制台日志（插值器（d））
});

const render = (data) => {
  const colors = ['red', 'blue', 'green', 'gold'];
  const width = (data) => (d) => (d / d3.max(data)) * 100 + '%';

  const selection = d3
    .select('.chart')
    .selectAll('div')
    .data(data);

  selection
    .transition()
    .duration(750)
    .style('width', width(data))

  selection
    .enter()
    .append('div')
    .style('width', '0px')
    .style('height', '100px')
    .style('background-color', (d, i) => colors[i % colors.length])
    .transition()
      .duration(750)
      .style('width', width(data))

  selection
    .exit()
    .transition()
    .duration(750)
    // shouldn't it transition smoothly?
    .style('width', '0px')
    .remove()
}

...

onClick('#button-1', () => render([20, 40]))
onClick('#button-2', () => render([20]))