How can I fetch data using d3.js within a Blazor .NET 6 Project? – Javascript

I do have a Blazor .NET 6 project and I have a component named UprRoutesMap.razor my component its simple this is the code:

<div id="@elementid"></div>

now I have a code-behind file names UprRoutes.razor.cs

and most of the code rely in javascript invoke methods and a .net method call from my js file. my file looks like this:

public partial class UprRoutesMap
{
    string elementid = "map";
    Size _windowSize;

    [Inject]
    public IJSRuntime JSRuntime { get; set; } = default!;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var dotnetObjectRef = DotNetObjectReference.Create(this);
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("uprRoutesMapInterop.registerSizeHandler", dotnetObjectRef);
            await JSRuntime.InvokeVoidAsync("uprRoutesMapInterop.initialize", elementid, _windowSize.Width);
        }
        await JSRuntime.InvokeVoidAsync("uprRoutesMapInterop.initialize", elementid, _windowSize.Width);
    }

    [JSInvokable]
    public void SetWindowSize(Size windowSize)
    {
        _windowSize = windowSize;
        StateHasChanged();
    }
}

those files works FINE, there isnt nothing wrong with them, my problem comes when i tried to use d3.js from my UprRoutesMap.js

this is my js file code:

(function () {
var tileUrl = 'https://api.maptiler.com/maps/openstreetmap/{z}/{x}/{y}.jpg?key=i2elDrPBTCAtHTT60x3M';
var tileAttribution = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';

var mapCenterAndZoom = {
    center: [25.505, -90],
    zoom: 5
};

var mapSettings = {
    scrollWheelZoom: false
};

var mapBoxTiles = L.tileLayer(tileUrl, { attribution: tileAttribution });

window.uprRoutesMapInterop = {
    initialize: function (elementId, width) {
        var elem = document.getElementById(elementId);
        if (!elem) {
            throw new Error('No element with ID ' + elementId);
        }
        if (elem) {
            resetMap(elem.map);
            mapCenterAndZoom = SetMapPosition(width);
            elem.map = L.map(elementId, mapSettings).setView(mapCenterAndZoom.center, mapCenterAndZoom.zoom)
                .addLayer(mapBoxTiles)
                .on('focus', onFocusMap)
                .on('blur', onBlurMap);
        }
        var map = elem.map;

        // we will be appending the SVG to the Leaflet map pane
        // g (group) element will be inside the svg
        var svg = d3.select(map.getPanes().overlaypane).append("svg");

        // if you don't include the leaflet-zoom-hide when a 
        // user zooms in or out you will still see the phantom
        // original SVG 
        var g = svg.append("g").attr("class", "leaflet-zoom-hide");

        //read in the GeoJSON. This function is asynchronous so
        // anything that needs the json file should be within
        d3.json("/json/upr-routes.geojson").then(function (collection) {
               var featuresdata = collection.features.filter(function (d) {
               return d.properties.id == "upr-001";
           });
        }).catch(error => console.error(error));
    },

    //Call .NET Method on UprRouteMap Component
    registerSizeHandler: function (dotNetObjectRef) {
        function resizeHandler() {
            dotNetObjectRef.invokeMethodAsync('SetWindowSize',
                {
                    width: window.innerWidth,
                    height: window.innerHeight
                });
        }

        //Set Up Initial Values
        resizeHandler();

        window.addEventListener('resize', resizeHandler);
    }
};

function resetMap(map) {
    if (map != undefined) {
        map.off();
        map.remove();
    }
}

function SetMapPosition(width) {
    if (width < 320) {
        return {
            center: [10.505, -100],
            zoom: 3
        };
    }

    if (width >= 320 && width < 450) {
        return {
            center: [10.505, -100],
            zoom: 3
        };
    }

    if (width >= 450 && width < 600) {
        return {
            center: [10.505, -100],
            zoom: 4
        };
    }

    if (width >= 600 && width < 900) {
        return {
            center: [13.505, -97],
            zoom: 4
        };
    }

    if (width >= 900 && width < 1100) {
        return {
            center: [22.505, -103.3],
            zoom: 5
        };
    }

    if (width >= 1100 && width < 1250) {
        return {
            center: [22.505, -103.3],
            zoom: 5
        };
    }

    if (width >= 1250 && width < 1500) {
        return {
            center: [22.505, -95],
            zoom: 5
        };
    }

    if (width >= 1500 && width < 1920) {
        return {
            center: [22.505, -93],
            zoom: 5
        };
    }

    if (width >= 1920) {
        return {
            center: [25.505, -90],
            zoom: 5
        };
    }
}

function onFocusMap(e) {
    e.target.scrollWheelZoom.enable();
}

function onBlurMap(e) {
    e.target.scrollWheelZoom.disable();
}})();

as soon as it gets to this method: d3.json("/json/upr-routes.geojson")

my headaches begin, I get a 404 Error, I changed the path wwwroot/json/upr-routes.geojson, but the result its the same.

can someone help me out here, what am i missing?

if somebody could help me out to figure out a solution because I’m in need to use d3.js in order to add animation to the data.

I was able to make this work using vs code but in a web static project, not a web app like is blazor .net 6.

Hopefully someone can help me out with the solution.