D3中的缓动函数：淡入图片

Question

我正在调用以下函数并将图像的位置传递给它：

function show_image(source) {
        var img = d3.select("#right-section").append("img").attr("src",source)
        img.transition().duration(5000).easeLinear;
    }

这里是一个函数，它使用一些JQuery来清空相关的HTML div对象（right-section），然后显示图像：

function Con1aaRight(div) {
    $("#right-section").empty();  
    show_image("images/netflix.jpg");    
}

问题在于图片显示出来了，但是没有像我想要的那样渐变出现（使用d3.ease在show_image函数中）。我可能应该使用JQuery，但我想融合d3。欢迎提供类似的过渡/动画想法。我正在构建一个数据科学主题的滚动网页教程，左侧为文本，右侧为图像。

- Frederic Bastiat

Answer 1

这里的问题在于理解什么是D3过渡以及它是如何工作的。

D3过渡（transition）从一个状态或值转换到另一个状态，正如其名称所示。

也就是说，您可以将以下内容进行转换：

• 位置：从 x = 10 到 x = 60。
• 颜色：从 绿色 到 蓝色。
• 字体大小：从 10px 到 18px。
• 透明度：从 0.2 到 0.9。
• 描边宽度：从 1px 到 5px。

... 还有其他几个属性/样式。

但是，您不能这样转换：

• 不存在 ➔ 存在

正如D3的创造者Bostock曾经说过：

当修改DOM时，对于无法插值的任何更改，请使用选择器；仅在动画时使用过渡。例如，创建元素无法插值：它要么存在，要么不存在。（source） 解决方案：将图像的不透明度进行过渡：

var body = d3.select("body");

show_image("http://www.defenders.org/sites/default/files/styles/large/public/tiger-dirk-freder-isp.jpg")

function show_image(source) {
  var img = body.append("img").attr("src", source).style("opacity", 0)
  img.transition().duration(5000).ease(d3.easeLinear).style("opacity", 1)
}

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

PS：放弃那段jQuery代码。使用D3时，您不需要jQuery。混合使用jQuery和D3不仅是不必要的，而且在某些情况下会导致问题默默发生。

- Gerardo Furtado