[NextJS] d3.select(...).transition is not a function

[Fray117]

Hi, I find this module interesting and tried to implement to NextJS based on code generated on https://donatso.github.io/family-chart/examples/create-tree/

I wrap all componentDidMount to a useEffect hook, createRef with useRef hook.

I did a conditional if everything was mounted based on .current presence from the ref.

However it did not run as expected and returning the exact d3.select(...).transition is not a function error which I assume this was came from the family-chart that d3 module was not yet loaded, I've attached my code I working on this page.

'use client'

import { Suspense, useEffect, useRef } from 'react'
import f3 from 'family-chart'

import '@/styles/family-tree.css'

export default function RelationshipAnalisis() {

    const treeRef = useRef<HTMLDivElement>(null)

    const treeData = [
        {
            "id": "0",
            "rels": {
                "father": "83285456-43d8-44bd-bbf1-9204bd69111e",
                "mother": "fe5debe3-2ff0-4bf5-be51-317f595575d5",
                "spouses": [
                    "588da99f-31df-4887-b4c1-163e4d2a6cee"
                ]
            },
            "data": {
                "first name": "Name",
                "last name": "Surname",
                "birthday": 1970,
                "avatar": "https://static8.depositphotos.com/1009634/988/v/950/depositphotos_9883921-stock-illustration-no-user-profile-picture.jpg",
                "gender": "M"
            }
        },
        {
            "id": "83285456-43d8-44bd-bbf1-9204bd69111e",
            "data": {
                "gender": "M",
                "first name": "",
                "last name": "",
                "birthday": "",
                "avatar": ""
            },
            "rels": {
                "children": [
                    "0"
                ],
                "spouses": [
                    "fe5debe3-2ff0-4bf5-be51-317f595575d5"
                ]
            }
        },
        {
            "id": "fe5debe3-2ff0-4bf5-be51-317f595575d5",
            "data": {
                "gender": "F",
                "first name": "",
                "last name": "",
                "birthday": "",
                "avatar": ""
            },
            "rels": {
                "spouses": [
                    "83285456-43d8-44bd-bbf1-9204bd69111e"
                ],
                "children": [
                    "0"
                ]
            }
        },
        {
            "id": "588da99f-31df-4887-b4c1-163e4d2a6cee",
            "data": {
                "gender": "F",
                "first name": "",
                "last name": "",
                "birthday": "",
                "avatar": ""
            },
            "rels": {
                "spouses": [
                    "0"
                ]
            }
        }
    ]

    useEffect(() => {
        if (treeRef?.current) {
            const store = f3.createStore({
                data: treeData,
                node_separation: 250,
                level_separation: 150
            })

            const view = f3.d3AnimationView({
                store,
                cont: document.querySelector("#FamilyChart")
            })

            const Card = f3.elements.Card({
                store,
                svg: view.svg,
                card_dim: { w: 220, h: 70, text_x: 75, text_y: 15, img_w: 60, img_h: 60, img_x: 5, img_y: 5 },
                card_display: [(d: { data: { [x: string]: any } }) => `${d.data['first name'] || ''} ${d.data['last name'] || ''}`, (d: { data: { [x: string]: any } }) => `${d.data['birthday'] || ''}`],
                mini_tree: true,
                link_break: false
            })

            view.setCard(Card)
            store.setOnUpdate((props: any) => view.update(props || {}))
            store.update.tree({ initial: true })
        }
    }, [treeRef.current])

    return (
        <div className="px-12 sm:px-32">
            <h2 className="text-xl font-medium">Hubungan</h2>
            <Suspense>
                <div id="treeWrapper" className="w-full h-96">
                    <div className="f3" id="FamilyChart" ref={treeRef}></div>
                </div>
            </Suspense>
        </div>
    )
}

[andrii-bodnar]

@Fray117 it works well in my Next.js project. Try removing the useEffect dependency (treeRef.current)