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转换从一个状态或值转换到另一个状态。

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

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

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

但是，您无法转换此内容：

不存在➔存在

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

修改DOM时，对任何无法插补的更改使用选择;仅使用过渡动画。例如，不可能插入元素的创建：它既存在又不存在。（source）

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

＆＃13;

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

＆＃13;

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

＆＃13;

PS：摆脱那个jQuery代码。使用D3时，不需要jQuery。混合jQuery和D3不仅是不必要的，而且在某些情况下也是冲突的来源。

d3.ease淡入淡出的图像

1 个答案: