How i can make a Disjoint Forced Graph with pbiviz in Power BI?

Question

I want to create a disjoint Forced-directed Graph base on https://observablehq.com/@nalband/disjoint-force-directed-graph?x-observable-signup=true , with PBIVIZ TOOL , the problem is I don't know how to extract data form DATAVIEW , and if I want to debug with console.log , I can't see any result in Console .

import powerbi from "powerbi-visuals-api";
import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";
import "./../style/visual.less";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import DataView = powerbi.DataView;
import IVisualHost = powerbi.extensibility.IVisualHost;
import { VisualFormattingSettingsModel } from "./settings";
import * as d3 from "d3";
type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;



export class Visual implements IVisual {
        private target: HTMLElement;
        private svg: d3.Selection<SVGElement, any, any, any>;
        

    constructor(options: VisualConstructorOptions) {
        console.log('Visual constructor', options);
        this.target = options.element;
        this.svg = d3.select(this.target).append("svg");
     }

    public update(options: VisualUpdateOptions) {
        
        // Get the data view
        const dataView: DataView = options.dataViews[0];

        // Extract the data from the data view
        const nodesData = dataView.table.rows.map(row => row[0]);
        const linksData = dataView.table.rows.map(row => ({ source: row[1], target: row[2] }));
        console.log("nodesData", options);
        // Clear the SVG container
        this.svg.selectAll("*").remove();

        // // Render the links
        const links = this.svg.selectAll("line")
        .data(linksData)
        .enter()
        .append("line")
        .attr("stroke", "#ccc")
        .attr("stroke-width", 1);

        // // Render the nodes
        const nodes = this.svg.selectAll("circle")
        .data(nodesData)
        .enter()
        .append("circle")
        .attr("r", 5)
        .attr("fill", "steelblue");

        // // Add the simulation tick handler
        // simulation.on("tick", () => {
        // links
        .attr("x1", d => d.source.x)
        .attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x)
        .attr("y2", d => d.target.y);

        // nodes
        .attr("cx", d => d.x)
        .attr("cy", d => d.y);
        });
    
    }