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.

What's your question? If I understand correctly everything iw roking fine apart from the warning? — Lars Kotthoff, Dec 05 '13 at 19:18
I see this warning as well all the time and got used to ignoring it. I have a suspicion that it's caused by some Firefox add-on. — Thomas W, Dec 05 '13 at 21:15
@LarsKotthoff Sorry, maybe I wasn't clear. The line ' d3.select(".coaltext").transition() .attr("opacity", function() {return d3.select(".coaltext").attr("opacity")' does not cause the desired effect (i.e., making the coaltext SVG object become opaque). — Nick Stockton, Dec 06 '13 at 00:44
It looks like you want to use `#coaltext` instead of `.coaltext`. — Lars Kotthoff, Dec 06 '13 at 09:16
*Forehead slap* Thanks again, @LarsKotthoff I owe you a beer. — Nick Stockton, Dec 06 '13 at 19:58
I'll be collecting as soon as I get a chance :) I'll post this as an answer for reference. — Lars Kotthoff, Dec 06 '13 at 20:00

score 1 · Accepted Answer · answered Dec 06 '13 at 20:01

1

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

answered Dec 06 '13 at 20:01

Lars Kotthoff

107,425
16
204
204

D3 - Using one SVG click event to affect another

1 Answers1