I am calling the following function and passing it the location of an image:
function show_image(source) {
var img = d3.select("#right-section").append("img").attr("src",source)
img.transition().duration(5000).easeLinear;
}
Here is the function that uses some JQuery to empty the relevant HTML div object (right-section) and then show the image:
function Con1aaRight(div) {
$("#right-section").empty();
show_image("images/netflix.jpg");
}
The problem is the image is showing but not fading in like I would like it to (with d3.ease in the show_image function). I probably should be using JQuery but I would like to incorporate d3. Similar transition/animation ideas wele. I am building a scrolling webpage tutorial on a data science topic with text on the left and images on the right.
I am calling the following function and passing it the location of an image:
function show_image(source) {
var img = d3.select("#right-section").append("img").attr("src",source)
img.transition().duration(5000).easeLinear;
}
Here is the function that uses some JQuery to empty the relevant HTML div object (right-section) and then show the image:
function Con1aaRight(div) {
$("#right-section").empty();
show_image("images/netflix.jpg");
}
The problem is the image is showing but not fading in like I would like it to (with d3.ease in the show_image function). I probably should be using JQuery but I would like to incorporate d3. Similar transition/animation ideas wele. I am building a scrolling webpage tutorial on a data science topic with text on the left and images on the right.
Share Improve this question asked Apr 8, 2017 at 22:24 Frederic BastiatFrederic Bastiat 6934 gold badges12 silver badges33 bronze badges1 Answer
Reset to default 9The problem here is understanding what is a D3 transition and how it works.
A D3 transition, as the name implies, transitions from one state, or value, to another state.
That being said, you can, for example, transition...
- A position: from
x = 10tox = 60. - A color: from
greentoblue. - A font size: from
10pxto18px. - An opacity: from
0.2to0.9. - A stroke width: from
1pxto5px.
... and several other attributes/styles.
However, you cannot transition this:
- non-existence ➔ existence
As Bostock, creator of D3, once said (emphasis mine):
When modifying the DOM, use selections for any changes that cannot be interpolated; only use transitions for animation. For example, it is impossible to interpolate the creation of an element: it either exists or it doesn’t. (source)
Solution: transition the opacity of the image:
var body = d3.select("body");
show_image("http://www.defenders/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/d3.v4.min.js"></script>PS: get rid of that jQuery code. You don't need jQuery when using D3. Mixing jQuery and D3 is not only unnecessary but also, in some cases, it will make things silently break.