Issue with Hint

[jessecano]

I'm following the example on this path https://github.com/uber/react-vis/blob/master/showcase/sankey/link-hint.js and I'm getting the following warning:

Warning: 'NaN' is an invalid value for the left css style property. in div (created by Hint) in Hint (at sankeychart2.jsx:55) in div (at sankeychart2.jsx:61) in SankeyChart2 (created by inject-SankeyChart2-with-campaignAdminstore) in inject-SankeyChart2-with-campaignAdminstore (at routes.jsx:12) in sankey2 (created by Route) in Route (at routes.jsx:20) in div (at routes.jsx:16) in Router (created by HashRouter) in HashRouter (at routes.jsx:15) in Pages (at src/index.js:13) in Provider (at src/index.js:12) in Root (at src/index.js:16)

This is how I'm rendering the Hint component:

` _renderHint() {

    const {activeLink} = this.state;    
    // calculate center x,y position of link for positioning of hint
    const x =
      activeLink.source.x1 + (activeLink.target.x0 - activeLink.source.x1) / 2;
    const y = activeLink.y0 - (activeLink.y0 - activeLink.y1) / 2;
    console.log("("+x+" - "+y+")")
    const hintValue = {
      [`${activeLink.source.name} ➞ ${
        activeLink.target.name
      }`]: activeLink.value
    };
    return <Hint x={x} y={y} value={hintValue} style={{left: 14}}/>;
  }`

I'll appreciate any help.

[lsimpson426]

I am getting this same message but cannot find good doc/examples of how to use Hint - ie, props examples with 'left' or other props that would also cause this type of issue.

So with more trial and error, I was able to get rid of this warning when I hard-coded the x and y values of the <Hint > component.

Example: const testedX = (typeof props.x == 'number' ? Math.abs(Number.parseInt(props.x)) : 250); const testedY = (typeof props.y == 'number' ? Math.abs(Number.parseInt(props.y)) : 450); ... <Hint x={testedX} y={testedY} value={{}}>

[rumyanar]

I found it in the code that in _getCSSLeft(x) it tries to add marginLeft, which is not defined. The same applies to marginTop. You will avoid the error by including the properties: <Hint x={x} y={y} marginLeft={0} marginTop={0} value={hintValue} />

The hint styling is still broken and it does not look like it does in the example.