D3 Geojson Globe在拖动和缩放期间在手机上的性能太差

Question

我只画了3条路径。那么在拖动时进行平移和缩放的性能也太慢了。

1）土地 2）美国各州 3）格线

不确定是什么削弱了性能。也许是我正在使用的GeoJSON杀死了它。

使用的GeoJSON是：https://jsonblob.com/ebb63996-f264-11e9-a437-a77258e9bb5d

下面是我必须绘制的代码。

content.drawGlobe = function () {
        content.getD3GeoJson().then(function (worldJson) {
            const svgWidth = window.innerWidth - (utilityService.is_small_device()
                ? 0
                : parseFloat(AppConst.sideMenuWidth));
            const margin = utilityService.is_iphone()
                ? ChartConst.GraphConfig.marginMobile
                : ChartConst.GraphConfig.margin;
            const svgHeight = window.innerHeight - utilityService.getHeaderHeight() - 44;
            const width = svgWidth - margin.left - margin.right;
            projection.translate([width / 2, svgHeight / 2]);
            const svg = d3.select("#globe")
                .attr("preserveAspectRatio", "xMinYMin meet")
                .attr("viewBox", "0 0 " + (svgWidth) + " " + (svgHeight)) //class to make it responsive
                .classed("svg-content-responsive", true)
                .style("background", "#010D12");
            const graticulePath = svg.append("path")
                .datum(graticule)
                .attr("class", "graticule")
                .style("fill", "none")
                .style("stroke", "#ccc")
                .style("stroke-width", "0.1px")
                .style("opacity", "1");
            const land = window.topojson.feature(worldJson, worldJson.objects.countries);
            const states = window.topojson.feature(worldJson, worldJson.objects.states);
            const mapPath = svg.append("path").datum(land)
                .style("stroke", "#fff")
                .style("stroke-width", "1px")
                .style("fill", "#243E54");
            const statePath = svg.append("path").datum(states)
                .style("stroke", "#fff")
                .style("stroke-width", "1px")
                .style("fill", "#243E54")
                .style("stroke-dasharray", "5, 5");
            const sensitivity = 58;
            const render = function () {
                statePath.attr("d", geoPath);
                mapPath.attr("d", geoPath);
                graticulePath.attr("d", geoPath);
            };
            render();
            svg
                .call(d3.drag().on("drag", function () {
                    const rotate = projection.rotate();
                    const k = sensitivity / projection.scale();
                    projection.rotate([
                        rotate[0] + d3.event.dx * k,
                        rotate[1] - d3.event.dy * k
                    ]);
                    render();
                }))
                .call(d3.zoom().on("zoom", function () {
                    projection.scale(initialScale * d3.event.transform.k);
                    render();
                }));
        });

    };

看起来像这样