search

d3 / d3-transition

Animated transitions for D3 selections.
https://d3js.org/d3-transition
ISC License
223 stars 65 forks source link

transition().style() fails to work as expected when applied to a starting property of 0px #117

Closed ChrisHSandN closed 3 years ago

ChrisHSandN commented 3 years ago

Steps to replicate:

  1. https://jsfiddle.net/chris_h/4haze3pc/ (Note: only Chrome seems to currently support the SVG2 feature of setting geometry properties using CSS style)

Expected Behaviour

All 4 circles should transition to cx: 100

Actual Behaviour

image

The circle with style=cx: 0 does not transition to the expected cx: 100 location.

My best guess is this is due to the browser automatically converting cx: 0 into cx: 0px image

mbostock commented 3 years ago

If you use CSS, you must specify units.

  .style('cx', datum => `${datum.cx}px`)
  .style('cy', datum => `${datum.cy}px`);