javascript - D3 过渡工作意外

Question

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

在下面的 GIF 中，我在 2 个数据集之间切换，从 [20, 40] 到 [20]

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

我应该怎么做？

实例: http://jsbin.com/vikodufugo/1/edit?js,output

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]))

Answer 1

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

D3 可以毫无问题地插入两个字符串，例如 300px 到 20px。但是，在您的情况下，起始字符串具有 "%"，而最终字符串具有 "px"。 D3 无法对此进行插值，这是情有可原的:从 "%" 到 "px" 的转换是什么？

让我们在下面的片段中展示它。在这里，我使用 d3.interpolateString(a,b) ，其中:

Returns an interpolator between the two strings a and b. The string interpolator finds numbers embedded in a and b, where each number is of the form understood by JavaScript.

在第一个demo中，两个字符串都有"px":

var interpolator = d3.interpolateString("300px", "0px");
d3.range(0,1.1,.1).forEach(function(d){
	console.log(interpolator(d))
});

<script src="https://d3js.org/d3.v4.min.js"></script>

如您所见，结果不错。

现在看看如果第一个字符串有 "%" 而第二个字符串有 "px" 会发生什么:

var interpolator = d3.interpolateString("100%", "0px");
d3.range(0,1.1,.1).forEach(function(d){
	console.log(interpolator(d))
});

<script src="https://d3js.org/d3.v4.min.js"></script>

如您所见，在第一次插值时，"%" 被转换为 "px"。这解释了您所看到的行为:div 突然从 "100%" 变为 "100px"，然后从那里变为 "0px" 在过渡期间。

解决方案:

更改您的字符串以在退出选择中使用 %:

selection
    .exit()
    .transition()
    .duration(750) 
    .style('width', '0%')
    //use % here -----^
    .remove()

这里是你的代码有那个变化:

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', '0%')
    .remove()
}


const onClick = (selector, callback) => (
  document.querySelector(selector).addEventListener('click', callback)
);

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

render([20, 40]);

<script src="https://d3js.org/d3.v4.js"></script> 
<div class="buttons">
    <button id="button-1" value="0">Option 1</button>
    <button id="button-2" value="1">Option 2</button>
</div>
<div class="chart"></div>