我有一个Blazor .NET 6项目，我有一个名为UprRoutesMap的组件。razor我的组件很简单，这是代码：

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

字符串
现在我有一个代码隐藏文件名UprRoutes.razor.cs
大多数代码依赖于JavaScript invoke方法和来自我的js文件的.net方法调用。我的文件看起来像这样：

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();
    }
}

型
这些文件工作正常，没有什么问题，我的问题来了，当我试图使用d3.js从我的UprRoutesMap.js
这是我的js文件代码：

(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();
}})();

型
d3.json（“/json/upr-routes.geojson”）
我的头痛开始，我得到一个404错误，我改变了路径wwwroot/json/upr-routes.geojson，但其结果相同.
谁能帮帮我，我错过了什么？
如果有人能帮我找出一个解决方案，因为我需要使用d3.js来添加动画到数据中。
我可以使用vs代码来完成这个工作，但是在一个web静态项目中，而不是像blazor.net6这样的web应用程序。
希望有人能帮我解决这个问题。