D3.js js：使用自定义svg标记时速度太慢（还有很多点）

我试图使用一些用户定义的svg图标作为传单上的标记，但我认为整个任务对于我的浏览器来说太重了

到目前为止，我一直在使用

L.circleMarker

，但现在我不得不使用星号、箭头、星星等标记，所以我决定将它们作为svg路径，然后插入它们，而不是我的circleMarker。为了让事情变得更复杂，我有超过30万的分数。有了圆圈标记器，我能够制作出一张可行的图表，速度不是闪电般快，但非常容易接受，特别是当使用相当深的变焦来区分各个点时（否则一切都像一个大斑点，无法研究）

然而，使用svg标记后，图表的计算量变得如此之大，以至于浏览器挂起。我打了100分、1000分和10000分，即使有1000分，差别也变得很明显。请问有没有什么解决办法，有没有人使用过svg标记和大量数据点？我认为canvas在我的代码中得到了恰当的应用，特别是对于

圆圈标记者来说，但我可能弄错了。非常感谢您的帮助。代码段中的代码，注释/取消注释底部的几行：

return L.circleMarker(p, style(feature));

或

从
circlemarker
切换到
svg
标记。
非常感谢

注：使用svg标记时，代码会随着突出显示事件而中断，但我已经完全理解了错误所在。
circlemarker可以很好地使用它



图表
#工具提示{
位置：绝对位置；
背景色：#2B292E；
颜色：白色；
字体系列：无衬线；
字体大小：15px；
指针事件：无；/*不触发工具提示上的事件*/
填充：15px 20px 10px 20px；
文本对齐：居中；
不透明度：0；
边界半径：4px；
}
html，正文{
身高：100%；
保证金：0；
}
#地图{
宽度：600px；
高度：600px；
}
var数据=[]；
变量NumOfPoints=100
for（设i=0；i90？'#6068F0'：
y>80？“#6B64DC”：
y>70？“#7660C9”：
y>60？“#815CB6”：
y>50？“#8C58A3”：
y>40？“#985490”：
y>30？“#A3507C”：
y>20？“#AE4C69”：
y>10？“#B94856”：
y>0？“#C44443”：
#d0430"；
}
//计算半径，使生成的圆按面积成比例
函数getRadius（y）{
r=Math.sqrt（y/Math.PI）
返回r；
}
//这是非常重要的！使用画布，否则图表对浏览器来说太重
//点的数量太多，在这种情况下，我们有大约300K点要绘制
var myRenderer=L.canvas({
填充：0.5
});
//使用从颜色渐变中拾取的fillColor创建样式
功能样式（特征）{
返回{
半径：getRadius（特征.属性.大小），
fillColor:getColor（feature.properties.year），
颜色：“000”，
重量:0,，
不透明度：1，
填充不透明度：0.9，
渲染器：myRenderer
};
}
//创建高光样式，颜色更深，半径更大
功能highlightStyle（功能）{
返回{
半径：getRadius（feature.properties.size）+1.5，
fillColor:#FFCE00“，
颜色：“FFCE00”，
体重：1，
不透明度：1，
填充不透明度：0.9
};
}
//将样式和弹出窗口附着到标记层
功能高亮点（e）{
var层=e.目标；
dotStyleHighlight=highlightStyle（layer.feature）；
layer.setStyle（点样式突出显示）；
如果（！L.Browser.ie&&！L.Browser.opera）{
层。布氏体（）；
}
}
函数重置点突出显示（e）{
var层=e.目标；
dotStyleDefault=样式（layer.feature）；
layer.setStyle（点样式默认值）；
}
功能onEachDot（特征、图层）{
分层({
鼠标悬停：highlightDot，
mouseout:resetdotphighlight
});
var popup='标记：'+feature.properties.popup+
“组：”+feature.properties.year
console.log("Starting markers.")
return L.marker(p, {
    renderer: myRenderer,
    icon: makeIcon('6-pointed-star', style(feature).color),
    });

L.Canvas.include({
    _updateMarker6Point: function (layer) {
        if (!this._drawing || layer._empty()) { return; }

        var p = layer._point,
            ctx = this._ctx,
            r = Math.max(Math.round(layer._radius), 1);

        this._drawnLayers[layer._leaflet_id] = layer;

        ctx.beginPath();
        ctx.moveTo(p.x + r     , p.y );
        ctx.lineTo(p.x + 0.43*r, p.y + 0.25 * r);
        ctx.lineTo(p.x + 0.50*r, p.y + 0.87 * r);
        ctx.lineTo(p.x         , p.y + 0.50 * r);
        ctx.lineTo(p.x - 0.50*r, p.y + 0.87 * r);
        ctx.lineTo(p.x - 0.43*r, p.y + 0.25 * r);
        ctx.lineTo(p.x -      r, p.y );
        ctx.lineTo(p.x - 0.43*r, p.y - 0.25 * r);
        ctx.lineTo(p.x - 0.50*r, p.y - 0.87 * r);
        ctx.lineTo(p.x         , p.y - 0.50 * r);
        ctx.lineTo(p.x + 0.50*r, p.y - 0.87 * r);
        ctx.lineTo(p.x + 0.43*r, p.y - 0.25 * r);
        ctx.closePath();
        this._fillStroke(ctx, layer);
    }
});

var Marker6Point = L.CircleMarker.extend({
    _updatePath: function () {
        this._renderer._updateMarker6Point(this);
    }
});

return new Marker6Point(p, style(feature));