Tell me more ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 2 down vote favorite

hello i have this code that places a marker and on mouse-over this marker is scaled out and then back to the 'original' scale

this.drawPerson = function () {
   self.svg.append("path")
        .attr("d", personPath)
        .attr("transform", "translate(100,100)scale(0.1)")
        .attr("class", "member")
        .style("fill", "steelblue")
        .on("mouseover", function(){
            d3.select(this).transition()
                .style("fill", "red")
                .attr("transform", "translate(100,100)scale(0.2)")
            })
        .on("mouseout", function() {
            d3.select(this).transition()
                .style("fill", "steelblue")
                .attr("transform", "translate(100,100)scale(0.1)")
            });

}

the x, and y are the coordinates for the position on the canvas.

here is the exapmle: http://jsfiddle.net/SuTZR/8/

any advise much appreciated

share|improve this question
What's wrong with it as it stands? Performance? – Matt Gibson Jul 24 '12 at 8:40
i was thinking that the mouse out could just be reset as the original, rather then having to set it again. similar to the way is done with css – khinester Jul 24 '12 at 9:28
Like when you mouseout of an element with css hover set to something different? I think I see what you mean, but you are doing an animated transform, which is a lot more complex than simply switching from state to state. You could use CSS hover for this if the browser supported a transform like that natively, but until CSS3 is widely adopted, it's not going to be possible. Examples here: tympanus.net/codrops/2011/11/07/animated-buttons-with-css3 – Matt Gibson Jul 24 '12 at 10:05
As usual, IE spoils it for the rest of us: w3schools.com/cssref/css3_browsersupport.asp – Matt Gibson Jul 24 '12 at 10:07
ok, thanks for your feedback. – khinester Jul 24 '12 at 12:59
show 2 more comments

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.