How to use the d3fc.dataJoin function in d3fc

chart.decorate((container, data) => {
        oldDecorate(container, data);
        if (!axisSplitter) return;

        if (axisSplitter.haveSplit()) {
            // Render a second axis on the right of the chart
            const altData = axisSplitter.altData();

            const y2AxisDataJoin = fc.dataJoin("d3fc-svg", "y2-axis").key(d => d);
            const ySeriesDataJoin = fc.dataJoin("g", "y-series").key(d => d);

            // Column 5 of the grid
            container
                .enter()
                .append("div")
                .attr("class", "y2-label-container")
                .style("grid-column", 5)
                .style("-ms-grid-column", 5)
                .style("grid-row", 3)
                .style("-ms-grid-row", 3)
                .style("width", altAxis.size || "1em")
                .style("display", "flex")
                .style("align-items", "center")
                .style("justify-content", "center")
                .append("div")

chart.decorate((container, data) => {
        oldDecorate(container, data);
        if (!axisSplitter) return;

        if (axisSplitter.haveSplit()) {
            // Render a second axis on the right of the chart
            const altData = axisSplitter.altData();

            const y2AxisDataJoin = fc.dataJoin("d3fc-svg", "y2-axis").key(d => d);
            const ySeriesDataJoin = fc.dataJoin("g", "y-series").key(d => d);

            // Column 5 of the grid
            container
                .enter()
                .append("div")
                .attr("class", "y2-label-container")
                .style("grid-column", 5)
                .style("-ms-grid-column", 5)
                .style("grid-row", 3)
                .style("-ms-grid-row", 3)
                .style("width", altAxis.size || "1em")
                .style("display", "flex")
                .style("align-items", "center")
                .style("justify-content", "center")
                .append("div")
                .attr("class", "y-label")

const axisOrdinal = (orient, scale) => {
    let tickArguments = [10];
    let tickValues = null;
    let decorate = () => {};
    let tickFormat = null;
    let tickSizeOuter = 6;
    let tickSizeInner = 6;
    let tickPadding = 3;
    let tickLineAlign = "center";
    let tickOffset = () => (tickLineAlign == "right" && scale.step ? scale.step() / 2 : 0);

    const svgDomainLine = line();

    const dataJoin = _dataJoin("g", "tick").key(identity);

    const domainPathDataJoin = _dataJoin("path", "domain");

    // returns a function that creates a translation based on
    // the bound data
    const containerTranslate = (scale, trans) => {
        let offset = 0;
        if (scale.bandwidth) {
            offset = scale.bandwidth() / 2;
            if (scale.round()) {
                offset = Math.round(offset);
            }
        }
        return d => trans(scale(d) + offset, 0);
    };

    const translate = (x, y) => (isVertical() ? `translate(${y}, ${x})` : `translate(${x}, ${y})`);

const axisOrdinal = (orient, scale) => {
    let tickArguments = [10];
    let tickValues = null;
    let decorate = () => {};
    let tickFormat = null;
    let tickSizeOuter = 6;
    let tickSizeInner = 6;
    let tickPadding = 3;
    let tickLineAlign = "center";
    let tickOffset = () => (tickLineAlign == "right" && scale.step ? scale.step() / 2 : 0);

    const svgDomainLine = line();

    const dataJoin = _dataJoin("g", "tick").key(identity);

    const domainPathDataJoin = _dataJoin("path", "domain");

    // returns a function that creates a translation based on
    // the bound data
    const containerTranslate = (scale, trans) => {
        let offset = 0;
        if (scale.bandwidth) {
            offset = scale.bandwidth() / 2;
            if (scale.round()) {
                offset = Math.round(offset);
            }
        }
        return d => trans(scale(d) + offset, 0);
    };

const _render = selection => {
        selection.text("");

        const labelDataJoin = fc.dataJoin("span", "splitter-label").key(d => d);

        const disabled = !alt && labels.length === 1;
        const coloured = color && settings.splitValues.length === 0;
        labelDataJoin(selection, labels)
            .classed("disabled", disabled)
            .text(d => d.name)
            .style("color", d => (coloured ? withoutOpacity(color(d.name)) : undefined))
            .on("click", d => {
                if (disabled) return;

                if (alt) {
                    settings.splitMainValues = settings.splitMainValues.filter(v => v != d.name);
                } else {
                    settings.splitMainValues = [d.name].concat(settings.splitMainValues || []);
                }

const multiAxis = (orient, baseAxis, scale) => {
    let tickSizeOuter = 6;
    let tickSizeInner = 6;
    let axisStore = store("tickFormat", "ticks", "tickArguments", "tickValues", "tickPadding");
    let decorate = () => {};

    let groups = null;

    const groupDataJoin = dataJoin("g", "group");
    const domainPathDataJoin = dataJoin("path", "domain");

    const translate = (x, y) => (isVertical() ? `translate(${y}, ${x})` : `translate(${x}, ${y})`);

    const pathTranspose = arr => (isVertical() ? arr.map(d => [d[1], d[0]]) : arr);

    const isVertical = () => orient === "left" || orient === "right";

    const multiAxis = selection => {
        if (!groups) {
            axisStore(baseAxis(scale).decorate(decorate))(selection);
            return;
        }

        if (selection.selection) {
            groupDataJoin.transition(selection);

const multiAxis = (orient, baseAxis, scale) => {
    let tickSizeOuter = 6;
    let tickSizeInner = 6;
    let axisStore = store("tickFormat", "ticks", "tickArguments", "tickValues", "tickPadding");
    let decorate = () => {};

    let groups = null;

    const groupDataJoin = dataJoin("g", "group");
    const domainPathDataJoin = dataJoin("path", "domain");

    const translate = (x, y) => (isVertical() ? `translate(${y}, ${x})` : `translate(${x}, ${y})`);

    const pathTranspose = arr => (isVertical() ? arr.map(d => [d[1], d[0]]) : arr);

    const isVertical = () => orient === "left" || orient === "right";

    const multiAxis = selection => {
        if (!groups) {
            axisStore(baseAxis(scale).decorate(decorate))(selection);
            return;
        }

        if (selection.selection) {
            groupDataJoin.transition(selection);
            domainPathDataJoin.transition(selection);