d3 / d3-shape

Graphical primitives for visualization, such as lines and areas.
https://d3js.org/d3-shape
ISC License
2.48k stars 310 forks source link

lineGenerator fail #181

Closed Bill-Niz closed 3 years ago

Bill-Niz commented 3 years ago

Config :

"d3-shape": "^3.0.1", "react-native": "^0.64.2", "react-native-svg": "^12.1.1",

I'm using d3 shap to draw background of my bottom nav bar.

` const lineGenerator = line().x(({ x }) => x).y(({ y }) => y) const left = lineGenerator([ { x: 0, y: 0 }, { x: tabWidth * 2, y: 0 } ])

const right = lineGenerator([
  { x: tabWidth * 3, y: 0 },
  { x: wWidth, y: 0 },
  { x: wWidth, y: NAVIGATION_BOTTOM_TABS_HEIGHT },
  { x: 0, y: NAVIGATION_BOTTOM_TABS_HEIGHT },
  { x: 0, y: 0 }
])    const left = lineGenerator([
  { x: 0, y: 0 },
  { x: tabWidth * 2, y: 0 }
])

const center = lineGenerator.curve(curveBasis)([
  { x: tabWidth * 2, y: 0 },
  { x: tabWidth * 2 + 5, y: 0 },
  { x: tabWidth * 2 + 15, y: NAVIGATION_BOTTOM_TABS_HEIGHT * 0.50 },
  { x: tabWidth * 3 - 15, y: NAVIGATION_BOTTOM_TABS

_HEIGHT 0.50 }, { x: tabWidth 3 - 5, y: 0 }, { x: tabWidth * 3, y: 0 } ]) `

When launching the app for the first it's working.

Screen Shot 2021-06-19 at 11 48 51

Screen Shot 2021-06-19 at 11 49 20

But when change i reload the page it fail. it Seems that this line fails const right = lineGenerator([ { x: tabWidth * 3, y: 0 }, { x: wWidth, y: 0 }, { x: wWidth, y: NAVIGATION_BOTTOM_TABS_HEIGHT }, { x: 0, y: NAVIGATION_BOTTOM_TABS_HEIGHT }, { x: 0, y: 0 } ])

You can see in this diif https://www.diffchecker.com/pJO12Fx0 that it doesn't generate the same output the second time.