Visx: Error: <line> attribute y2: Expected length, "NaN".

Created on 2 Aug 2017  ·  1Comment  ·  Source: airbnb/visx

Hi, love how this project looks and can't wait to get this going!

Question, I'm trying this demo now myself now first: https://vx-demo.now.sh/areas

And I'm running into Error: <line> attribute y2: Expected length, "NaN".

Full trace: 

setValueForProperty @ DOMPropertyOperations.js:141
_updateDOMProperties @ ReactDOMComponent.js:879
mountComponent @ ReactDOMComponent.js:520
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
updateChildren @ ReactChildReconciler.js:121
_reconcilerUpdateChildren @ ReactMultiChild.js:206
_updateChildren @ ReactMultiChild.js:310
updateChildren @ ReactMultiChild.js:297
_updateDOMChildren @ ReactDOMComponent.js:942
updateComponent @ ReactDOMComponent.js:760
receiveComponent @ ReactDOMComponent.js:722
receiveComponent @ ReactReconciler.js:124
_updateRenderedComponent @ ReactCompositeComponent.js:753
_performComponentUpdate @ ReactCompositeComponent.js:723
updateComponent @ ReactCompositeComponent.js:644
receiveComponent @ ReactCompositeComponent.js:546
receiveComponent @ ReactReconciler.js:124
_updateRenderedComponent @ ReactCompositeComponent.js:753
_performComponentUpdate @ ReactCompositeComponent.js:723
updateComponent @ ReactCompositeComponent.js:644
receiveComponent @ ReactCompositeComponent.js:546
receiveComponent @ ReactReconciler.js:124
updateChildren @ ReactChildReconciler.js:109
_reconcilerUpdateChildren @ ReactMultiChild.js:206
_updateChildren @ ReactMultiChild.js:310
updateChildren @ ReactMultiChild.js:297
_updateDOMChildren @ ReactDOMComponent.js:942
updateComponent @ ReactDOMComponent.js:760
receiveComponent @ ReactDOMComponent.js:722
receiveComponent @ ReactReconciler.js:124
updateChildren @ ReactChildReconciler.js:109
_reconcilerUpdateChildren @ ReactMultiChild.js:206
_updateChildren @ ReactMultiChild.js:310
updateChildren @ ReactMultiChild.js:297
_updateDOMChildren @ ReactDOMComponent.js:942
updateComponent @ ReactDOMComponent.js:760
receiveComponent @ ReactDOMComponent.js:722
receiveComponent @ ReactReconciler.js:124
updateChildren @ ReactChildReconciler.js:109
_reconcilerUpdateChildren @ ReactMultiChild.js:206
_updateChildren @ ReactMultiChild.js:310
updateChildren @ ReactMultiChild.js:297
_updateDOMChildren @ ReactDOMComponent.js:942
updateComponent @ ReactDOMComponent.js:760
receiveComponent @ ReactDOMComponent.js:722
receiveComponent @ ReactReconciler.js:124
_updateRenderedComponent @ ReactCompositeComponent.js:753
_performComponentUpdate @ ReactCompositeComponent.js:723
updateComponent @ ReactCompositeComponent.js:644
receiveComponent @ ReactCompositeComponent.js:546
receiveComponent @ ReactReconciler.js:124
_updateRenderedComponent @ ReactCompositeComponent.js:753
_performComponentUpdate @ ReactCompositeComponent.js:723
updateComponent @ ReactCompositeComponent.js:644
performUpdateIfNecessary @ ReactCompositeComponent.js:560
performUpdateIfNecessary @ ReactReconciler.js:156
runBatchedUpdates @ ReactUpdates.js:150
perform @ Transaction.js:143
perform @ Transaction.js:143
perform @ ReactUpdates.js:89
flushBatchedUpdates @ ReactUpdates.js:172
closeAll @ Transaction.js:209
perform @ Transaction.js:156
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
enqueueUpdate @ ReactUpdates.js:200
enqueueUpdate @ ReactUpdateQueue.js:24
enqueueSetState @ ReactUpdateQueue.js:218
./node_modules/react/lib/ReactBaseClasses.js.ReactComponent.setState @ ReactBaseClasses.js:64
(anonymous) @ Graphs.js:30
Promise (async)
(anonymous) @ Graphs.js:28
Promise (async)
componentDidMount @ Graphs.js:27
(anonymous) @ ReactCompositeComponent.js:264
measureLifeCyclePerf @ ReactCompositeComponent.js:75
(anonymous) @ ReactCompositeComponent.js:263
notifyAll @ CallbackQueue.js:76
close @ ReactReconcileTransaction.js:80
closeAll @ Transaction.js:209
perform @ Transaction.js:156
batchedMountComponentIntoNode @ ReactMount.js:126
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
_renderNewRootComponent @ ReactMount.js:319
_renderSubtreeIntoContainer @ ReactMount.js:401
render @ ReactMount.js:422
./src/index.js @ index.js:34
__webpack_require__ @ bootstrap 456fb2c…:659
fn @ bootstrap 456fb2c…:85
1 @ transports ws:1
__webpack_require__ @ bootstrap 456fb2c…:659
./node_modules/@vx/bounds/build/enhancers/withBoundingRects.js.Object.defineProperty.value @ bootstrap 456fb2c…:708
(anonymous) @ bundle.js:712
DOMPropertyOperations.js:141 Error: <path> attribute d: Expected number, "M0,NaNC0.1910274963…".
setValueForProperty @ DOMPropertyOperations.js:141
_updateDOMProperties @ ReactDOMComponent.js:879
mountComponent @ ReactDOMComponent.js:520
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountChildren @ ReactMultiChild.js:236
_createInitialChildren @ ReactDOMComponent.js:703
mountComponent @ ReactDOMComponent.js:522
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
updateChildren @ ReactChildReconciler.js:121
_reconcilerUpdateChildren @ ReactMultiChild.js:206
_updateChildren @ ReactMultiChild.js:310
updateChildren @ ReactMultiChild.js:297
_updateDOMChildren @ ReactDOMComponent.js:942
updateComponent @ ReactDOMComponent.js:760
receiveComponent @ ReactDOMComponent.js:722
receiveComponent @ ReactReconciler.js:124
_updateRenderedComponent @ ReactCompositeComponent.js:753
_performComponentUpdate @ ReactCompositeComponent.js:723
updateComponent @ ReactCompositeComponent.js:644
receiveComponent @ ReactCompositeComponent.js:546
receiveComponent @ ReactReconciler.js:124
_updateRenderedComponent @ ReactCompositeComponent.js:753
_performComponentUpdate @ ReactCompositeComponent.js:723
updateComponent @ ReactCompositeComponent.js:644
receiveComponent @ ReactCompositeComponent.js:546
receiveComponent @ ReactReconciler.js:124
updateChildren @ ReactChildReconciler.js:109
_reconcilerUpdateChildren @ ReactMultiChild.js:206
_updateChildren @ ReactMultiChild.js:310
updateChildren @ ReactMultiChild.js:297
_updateDOMChildren @ ReactDOMComponent.js:942
updateComponent @ ReactDOMComponent.js:760
receiveComponent @ ReactDOMComponent.js:722
receiveComponent @ ReactReconciler.js:124
updateChildren @ ReactChildReconciler.js:109
_reconcilerUpdateChildren @ ReactMultiChild.js:206
_updateChildren @ ReactMultiChild.js:310
updateChildren @ ReactMultiChild.js:297
_updateDOMChildren @ ReactDOMComponent.js:942
updateComponent @ ReactDOMComponent.js:760
receiveComponent @ ReactDOMComponent.js:722
receiveComponent @ ReactReconciler.js:124
updateChildren @ ReactChildReconciler.js:109
_reconcilerUpdateChildren @ ReactMultiChild.js:206
_updateChildren @ ReactMultiChild.js:310
updateChildren @ ReactMultiChild.js:297
_updateDOMChildren @ ReactDOMComponent.js:942
updateComponent @ ReactDOMComponent.js:760
receiveComponent @ ReactDOMComponent.js:722
receiveComponent @ ReactReconciler.js:124
_updateRenderedComponent @ ReactCompositeComponent.js:753
_performComponentUpdate @ ReactCompositeComponent.js:723
updateComponent @ ReactCompositeComponent.js:644
receiveComponent @ ReactCompositeComponent.js:546
receiveComponent @ ReactReconciler.js:124
_updateRenderedComponent @ ReactCompositeComponent.js:753
_performComponentUpdate @ ReactCompositeComponent.js:723
updateComponent @ ReactCompositeComponent.js:644
performUpdateIfNecessary @ ReactCompositeComponent.js:560
performUpdateIfNecessary @ ReactReconciler.js:156
runBatchedUpdates @ ReactUpdates.js:150
perform @ Transaction.js:143
perform @ Transaction.js:143
perform @ ReactUpdates.js:89
flushBatchedUpdates @ ReactUpdates.js:172
closeAll @ Transaction.js:209
perform @ Transaction.js:156
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
enqueueUpdate @ ReactUpdates.js:200
enqueueUpdate @ ReactUpdateQueue.js:24
enqueueSetState @ ReactUpdateQueue.js:218
./node_modules/react/lib/ReactBaseClasses.js.ReactComponent.setState @ ReactBaseClasses.js:64
(anonymous) @ Graphs.js:30
Promise (async)
(anonymous) @ Graphs.js:28
Promise (async)
componentDidMount @ Graphs.js:27
(anonymous) @ ReactCompositeComponent.js:264
measureLifeCyclePerf @ ReactCompositeComponent.js:75
(anonymous) @ ReactCompositeComponent.js:263
notifyAll @ CallbackQueue.js:76
close @ ReactReconcileTransaction.js:80
closeAll @ Transaction.js:209
perform @ Transaction.js:156
batchedMountComponentIntoNode @ ReactMount.js:126
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
_renderNewRootComponent @ ReactMount.js:319
_renderSubtreeIntoContainer @ ReactMount.js:401
render @ ReactMount.js:422
./src/index.js @ index.js:34
__webpack_require__ @ bootstrap 456fb2c…:659
fn @ bootstrap 456fb2c…:85
1 @ transports ws:1
__webpack_require__ @ bootstrap 456fb2c…:659
./node_modules/@vx/bounds/build/enhancers/withBoundingRects.js.Object.defineProperty.value @ bootstrap 456fb2c…:708
(anonymous) @ bundle.js:712

I'm wondering what it could be? I'm using the latest of all dependencies:

├─ @vx/[email protected]
├─ @vx/[email protected]
├─ @vx/[email protected]
├─ @vx/[email protected]
├─ @vx/[email protected]
├─ @vx/[email protected]
├─ @vx/[email protected]
├─ @vx/[email protected]
├─ @vx/[email protected]
├─ @vx/[email protected]
├─ @vx/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

And I just copy-pasted the example, which I believe includes the mock data also already. I saved that file as Area.js and I then use the component as:

import Area from './Area'

<Area width={400} height={300} margin={{
  left : 2,
  right: 2,
}} />

This last part I wasn't entirely sure about, so that's likely where I go south?

picture kvz

Most helpful comment

So it turns out I just had to also specify a margin top & bottom 😄 Sorry for the noise everyone, but perhaps this will help a future googling newcomer 👍

picture kvz on 2 Aug 2017
👍3 😄1

>All comments

So it turns out I just had to also specify a margin top & bottom 😄 Sorry for the noise everyone, but perhaps this will help a future googling newcomer 👍

kvz picture kvz on 2 Aug 2017
👍3 😄1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

BrianRosamilia picture BrianRosamilia  ·  3Comments
ghost picture ghost  ·  5Comments
elisechant picture elisechant  ·  3Comments
danielprogramic picture danielprogramic  ·  3Comments
EfosaSO picture EfosaSO  ·  4Comments