Graph is loading fine, but gives console error

[hemant-info2016]

Describe the bug
I have used the exact same sample which is mentioned here (with same graph data):
https://www.npmjs.com/package/react-d3-graph#usage-sample

And graph loads perfectly fine, but it shows error in console in Chrome browser:
react-dom.development.js:2320 Error: attribute d: Expected number, "MNaN,NaNA0,0 0 0,…"

Following are the current package version:
"d3": "^5.16.0",
"react": "16.12.0",
"react-d3-graph": "^2.5.0",
"react-dom": "16.12.0",

Note: I have installed d3 first and then react-d3-graph as suggested.
Please help!!

[Jshaider]

same issue with me. Please help..

[Jshaider]

react-dom.development.js:1297 Error: attribute d: Expected number, "MNaN,NaNA0,0 0 0,…".

[Vpicc]

I'm having the same issue

[technicalta]

I'm also having this issue.

[danielcaldas]

I'll need more information from all of you if possible. I'm not currently able to replicate this issue. Could you please follow the bug report template and provide all the information there in this same issue? Thanks

Also if possible a link to a repo or code sandbox with the error.

Another question. Is this only about a JavaScript error that you see in the console, or is it breaking your applications?

@technicalta @Jshaider @Vpicc @hemant-info2016

[michaelbdavid]

I'm also seeing this issue as well.

To Reproduce Steps to reproduce the behavior:

Happens on initial load of graph.
Seeing the follow error x14 which matches the number of nodes loaded within my graph:

react-dom.development.js:1297 Error: <path> attribute d: Expected number, "MNaN,NaNA0,0 0 0,…".
setValueForProperty @ react-dom.development.js:1297
setInitialDOMProperties @ react-dom.development.js:5831
setInitialProperties @ react-dom.development.js:6026
finalizeInitialChildren @ react-dom.development.js:7499
completeWork @ react-dom.development.js:18978
completeUnitOfWork @ react-dom.development.js:22192
performUnitOfWork @ react-dom.development.js:22165
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
enqueueSetState @ react-dom.development.js:12639
push.../../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:471
(anonymous) @ Graph.js:302
call @ dispatch.js:57
step @ simulation.js:32
timerFlush @ timer.js:61
wake @ timer.js:71
requestAnimationFrame (async)
sleep @ timer.js:108
restart @ timer.js:39
timer @ timer.js:52
(anonymous) @ simulation.js:17
_createForceSimulation @ graph.helper.js:52
initializeGraphState @ graph.helper.js:425
Graph @ Graph.js:472
constructClassInstance @ react-dom.development.js:12880
updateClassComponent @ react-dom.development.js:17100
beginWork @ react-dom.development.js:18620
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168

Environment:

OS: centos7
Browser: Chrome
Version: 84.0.4147.89 (Official Build) (64-bit)
Node version [v10.18.1]
"react-d3-graph": "^2.5.0",
"react-dom": "^16.13.1",
"@types/react": "^16.9.0",
"@types/react-d3-graph": "^2.3.3",
"@types/react-dom": "^16.9.0",
"d3-drag": "^1.2.5",
"d3-force": "^2.0.1",
"d3-shape": "^1.3.7",
"d3-zoom": "^1.8.3",

[danielcaldas]

Hey @michaelbdavid, I might be close to finding the issue but would need a few more details.

Are you setting values for any of the following in you configuration?

• config.link.markerWidth
• config.link.markerHeight
• config.node.size

If yes may I get your current react-d3-graph configuration values? Additionally, if you could link a repo where I can reproduce this issue would be of great help since I'm not able to reproduce it myself.

Same for @technicalta @Jshaider and others, if possible.

[Tom-Davidson]

Do you have the react devtools extension installed? My guess is that it's trying to parse the contents of the path's "d" and not understanding it. I have the same in mine. I had config.node.size set but get the same without it.

[Jshaider]

Hello @danielcaldas, the error is just in console, it's not breaking the application. I have set config.node.size. nothing else.

[Jshaider]

@danielcaldas these are my graph configurations
`const myConfig = {

        height: (window.screen.height > 700 ? (window.screen.height/2) + 70 : window.screen.height - 200),
        width:window.screen.width -250,
        nodeHighlightBehavior: true,
        automaticRearrangeAfterDropNode: true,
        node: {
            fontSize : 15,
            fontWeight:600,
            highlightStrokeColor: "blue",
            labelProperty: "name"
        },
        link: {
            highlightColor: "lightblue",
            color:"#2bcbba"
        },
    };`

[Jshaider]

when I click on generate the graph, first it shows errors, and then the graph is successfully

generated.

I am actually new to programming, that is all I can do to help you.. if you need any further information.. please let me know. I will be happy to help you..

[danielcaldas]

Do you have the react devtools extension installed? My guess is that it's trying to parse the contents of the path's "d" and not understanding it. I have the same in mine. I had config.node.size set but get the same without it.

This might actually be possible, may I check whether you have react devtools installed? I have them installed and I'm still not able to see the error.

I think we're lacking some input validation here, whereby non-numerical values for config.link.markerWidth or config.link.markerHeight or config.node.size are provided and we're not parsing them.

Is that the case, I can't see the value of your config.node.size, are you providing a string or a number as input?

If this is the case the culprit Pull Request might this feature #271 introduced in react-d3-graph@2.5.0.

Hey @Jshaider may I ask you to downgrade react-d3-graph to version 2.4.1 and verify if you're still facing the same issue? Thanks!

[terahn]

An easy way I've found to reproduce this in the sandbox is to press the add node button repeatedly. It's really puzzling though, since the error will only pop up every once in a while.

[Alex-Mason-1982]

I was having the same issue and i can confirm that downgrading to react-d3-graph to version 2.4.1 has solved it.

Do you have the react devtools extension installed? My guess is that it's trying to parse the contents of the path's "d" and not understanding it. I have the same in mine. I had config.node.size set but get the same without it.

This might actually be possible, may I check whether you have react devtools installed? I have them installed and I'm still not able to see the error.

I think we're lacking some input validation here, whereby non-numerical values for config.link.markerWidth or config.link.markerHeight or config.node.size are provided and we're not parsing them.

Is that the case, I can't see the value of your config.node.size, are you providing a string or a number as input?

If this is the case the culprit Pull Request might this feature #271 introduced in react-d3-graph@2.5.0.

Hey @Jshaider may I ask you to downgrade react-d3-graph to version 2.4.1 and verify if you're still facing the same issue? Thanks!