Node label is not showing HTML content

Majky336 commented 5 years ago

Hey there,

first of all, thanks for great work! I have found just little issue, when trying to return some HTMLelement inside nodeLabel prop. Example:

createNodeLabel = node => {
    const { firstAtt, secondAtt } = node;

    return (
        <div>
            <div>{firstAtt}</div>
            <div>{secondAtt }</div>
        </div>
    );
}
...
render() {
    return (
         <ForceGraph3D
            graphData={graphData}
            nodeLabel={this.createNodeLabel}
          />
    );
}

If using this code, after hover on node I get tooltip with [object Object] text inside it. Returning string or string literal in createNodeLabel works. In the docs there is written that HTML is supported, so what am I doing wrong? Could you help please?

vasturiano commented 5 years ago

@Majky336 Thanks for reaching out. nodeLabel supports HTML but not JSX as you're passing now. Just use string literals to pass the tooltip content:

return ```<div>
  <div>{firstAtt}</div>
  <div>{secondAtt }</div>
</div>```;

Majky336 commented 5 years ago

Thanks for guiding me, I didn't realize that I can use it like this. Thanks for the help and keep up the great work! :)

ItFlyingStart commented 4 years ago

Hello,

I have tried to show the label in HTML (by following this example), but I couldn't make it work. Can you please help?

Codes:

    const createNodeLabel = node => {
        const { id, group } = node;

        return ```
            <div>
                <div>{id}</div>
                <div>{group}</div>
            </div>
        ```;
    }

    useEffect(() => {
        fetch('/datasets/miserables.json')
            .then(res => res.json())
            .then(data => {
                setGraphData(data)
            })
    }, [])

    return (
        <div className={styles.container}>
            <Head>
                <title>Ecosystem</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <main className={styles.main}>
                <div className={styles.grid}>
                    {( graphData ?
                        <ForceGraph3D
                            ref={fgRef}
                            graphData={graphData}
                            nodeLabel={createNodeLabel}
                            nodeAutoColorBy="group"
                            onNodeClick={handleClick}
                                    /> : null
                    )}
                </div>
            </main>

            <footer className={styles.footer}>
            </footer>
        </div>
    )

Error message:

BloomFocusGraph.js:33 Uncaught TypeError: "" is not a function
    at createNodeLabel (BloomFocusGraph.js:33)
    at 3d-force-graph.module.js:497
    at Function.tick (three-render-objects.module.js:255)
    at Function.comp.<computed> [as tick] (kapsule.module.js:159)
    at Function._animationCycle (3d-force-graph.module.js:288)
    at comp.<computed> (kapsule.module.js:159)

vasturiano commented 4 years ago

@ItFlyingStart please use single ticks in the string literal, and if you wish to include variables in the template they should be preceeded by a $, like so:

return `<div>
  <div>${id}</div>
  <div>${group}</div>
</div>`;

ItFlyingStart commented 4 years ago

That works. Thank you so much.

vasturiano / react-force-graph

Node label is not showing HTML content #81