reactjs - D3 + 带有反应 js 的传单地图

Question

我正在尝试制作地图并在同一张地图中使用 d3 绘制图钉，但不知何故，图钉没有出现，我也没有收到任何错误，但有时会出现此错误。

我的代码基本上从 api 获取数据，从 lat 和 long 获取数据以放入传单地图。 g.selectAll(...).data(...).enter is not a function

这是我的代码

 React.useEffect(() => {
        async function getWellheadf() {
            const getWellhead = await ApiService.getWellhead();

            const svg = d3.select(mapref.current).select("svg"),
                g = svg.append("g");
            getWellhead.data.forEach(function (d) {
                d.LatLng = new L.latLng(d.Latitude, d.Longitude);
                setWellhead(d.LatLng)
            })
            if (map) {
                L.tileLayer('https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}.png', {
                    id: 'mapbox/streets-v11',
                }).addTo(map);
                console.log(wellhead)
                const feature = g.selectAll("circle")
                    .data(wellhead)
                    .join("circle")
                    .enter().append("circle")
                    .style("stroke", "black")
                    .style("opacity", .6)
                    .style("fill", "red")
                    .attr("r", 20);

                const update = () => {
                    feature.attr("transform",
                        function (d) {

                            return "translate(" +
                                map.latLngToLayerPoint(d.LatLng).x + "," +
                                map.latLngToLayerPoint(d.LatLng).y + ")";
                        }
                    )
                }
                map.on("viewreset", update);



                // L.circle(wellhead, {
                //     color: 'black',
                //     fillColor: '#f03',
                //     fillOpacity: 0.5,
                //     radius: 500
                // }).addTo(map);
            }
        }
        getWellheadf();
    }, [map]);

标签： reactjsdictionaryd3.jsleaflet