Javascript 轻松淡入图像

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

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

下面是使用一些JQuery清空相关HTML div对象（右部分）然后显示图像的函数：

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

---

问题是图像正在显示，但没有像我希望的那样消失（使用show_image函数中的d3.ease）。我可能应该使用JQuery，但我想合并d3。欢迎类似的过渡/动画想法。我正在构建一个关于数据科学主题的滚动网页教程，左边是文本，右边是图像。

这里的问题是理解什么是D3转换以及它是如何工作的

D3转换，顾名思义，从一种状态或值转换到另一种状态

也就是说，你可以，例如，转换

• 位置：从

  x=10

  到

  x=60

• A颜色：从

  绿色

  到

  蓝色

• 字体大小：从

  10px

  到

  18px

• 不透明度：从

  0.2

  到

  0.9

• 笔划宽度：从

  1px

  到

  5px

。。。以及其他几个属性/样式

但是，不能转换此选项：

• 不存在➔ 存在

正如D3的创造者博斯托克（Bostock）曾经说过的（我的重点）：

修改DOM时，对无法插值的任何更改使用选择；仅对动画使用变换。例如，不可能插值元素的创建：它要么存在，要么不存在。（）

解决方案：转换图像的不透明度：

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

var body=d3.选择（“body”）；
显示_图像（“http://www.defenders.org/sites/default/files/styles/large/public/tiger-dirk-freder-isp.jpg")
函数显示图像（源）{
var img=body.append（“img”）.attr（“src”，source）.style（“不透明”，0）
img.transition（）.duration（5000）.ease（d3.easeLinear）.style（“不透明度”，1）
}