D3 - Using one SVG click event to affect another

Question

This is a followup to a question I asked a few days ago.

On my graph, I want the original icon to animate when clicked, and I also want explanatory text to fade into view. I've made the text using InkScape and xlinked it into the code (like the other icons).

var coal = svg.append("svg:image")
.attr("xlink:href", "nouns/coal.svg")
.attr("width", 35)
.attr("height", 35)
.attr("x", 10)
.attr("y", 30)
.on("click", function() {
    d3.select(this).transition()
        .attr("x", function() {return d3.select(this).attr("x") == 10 ? 80 : 10; })
        .attr("y", function() {return d3.select(this).attr("y") == 30 ? 150 : 30; })
        .attr("width", function() {return d3.select(this).attr("width") == 35 ? 100 : 35; })
        .attr("height", function() {return d3.select(this).attr("height") == 35 ? 100 : 35; })
        .duration(750);
    d3.select(".coaltext").transition()
        .attr("opacity", function() {return d3.select(".coaltext").attr("opacity") == 0 ? 100 : 0 })
});

    svg.append("g")
        .append("svg:image")
        .attr("xlink:href", "testtext.svg")
        .attr("id", "coaltext")
        .attr("height", 200)
        .attr("width", 200)
        .attr("y", 170)
        .attr("x", 400)
        .attr("opacity", 0);

Only other weird thing is I'm getting this error message: event.returnValue is deprecated. Please use the standard event.preventDefault() instead. --jquery.min.js:2

Which is odd because i didn't load any jquery libraries into my script. Hrm.

Answer 1

It looks like you want to use #coaltext instead of .coaltext when selecting the element -- it's an ID and not a class.