CODEWITHSUNDEEP
javascriptd3.js
yavg
yavg

Reputation: 3051

How can I animate the top of my svg element like in this gif using d3.js?

I apologize if the title is not the right one, but I'm not sure what it should be. I'm trying to animate a marker that is a svg image contained in the "marker.svg" file. I would like to copy exactly the same effect of this gif:

enter image description here

But to my visual perception it seems that only the top part of the marker is being animated.

In my code, The main problem is that the marker moves from its point of origin. This is my current result: enter image description here

How can I make to match the animation of the gif?

Thank you.

  <body>

  <script type="text/javascript">

    const svg = d3.select("body").append("svg").attr("width",1000).attr("height",1000);

    svg.append("circle").attr("r",5).attr("cx",253).attr("cy",102).style("stroke","#FF0000");

    var widthMarker=50;
    var img = svg.append("svg:image")
        .attr("xlink:href", "marker.svg")
        .attr("width", widthMarker)
        .attr("height", widthMarker)
        .attr("x", 228)
        .attr("y",53)
        .on('mouseover', function(){
          d3.select(this).transition().ease("bounce").duration(500).attr("height",widthMarker+50);
        })
        .on('mouseout', function(){
          d3.select(this).transition().ease("bounce").duration(500).attr("height",widthMarker);
        })

  </script>
  </body>

http://plnkr.co/edit/IqebfdBikFcezCnz2YxA?p=preview

Upvotes: 1

Views: 129

Answers (1)

Mike Elliott
Mike Elliott

Reputation: 307

I messed around with the "y" coordinate attr on the mouseover and mouseout, I get the result you're looking for.

<body>
  <script type="text/javascript">
    const svg = d3.select("body").append("svg").attr("width", 1000).attr("height", 1000);

    svg.append("circle").attr("r", 5).attr("cx", 253).attr("cy", 102).style("stroke", "#FF0000");

    var widthMarker = 50;
    var img = svg.append("svg:image")
      .attr("xlink:href", "marker.svg")
      .attr("width", widthMarker)
      .attr("height", widthMarker)
      .attr("x", 228)
      .attr("y", 50)
      .on('mouseover', function() {
        d3.select(this)
          .transition()
          .ease("bounce")
          .duration(500)
          .attr("height", widthMarker + 50)
          .attr("y", 17);
      })
      .on('mouseout', function() {
        d3.select(this)
          .transition()
          .ease("bounce")
          .duration(500)
          .attr("height", widthMarker)
          .attr("y", 50);
      })
  </script>
</body>

Here is the updated Plunkr.

Upvotes: 2

Related Questions