d3.ease 淡入淡出图像

Question

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

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。欢迎类似的过渡/动画想法。我正在构建一个关于数据科学主题的滚动网页教程，左侧是文本，右侧是图像。

Answer 1

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

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

话虽如此，您可以，例如，过渡...

• A 位置：从x = 10到x = 60。
• 颜色：从green到blue。
• 字体大小：从10px到18px。
• 不透明度：从0.2到0.9。
• 笔划宽度：从1px到5px。

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

但是，您不能转换此内容：

• 不存在？存在

正如 D3 的创造者 Bostock 曾经说过的（强调我的）：

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

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

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 不仅没有必要，而且在某些情况下，它会使事情无声无息地崩溃。