1

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

1
  • I believe you need to transition the y location by the same amount in the negative direction -- so if the marker is 50 px high, growing by 50% would move the bottom point 25 px downward. Try changing y to its current location -25 px. But now that I think about it, it would be best to move the origin (0, 0) point of the marker to the tip of the symbol -- that way, scaling would not affect the apparent pointed-to location.
    – SteveR
    Mar 28, 2018 at 2:06

1 Answer 1

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.