Javascript d3中的缩放功能-运行缓慢

所以，我有一个可以工作的d3地图，但唯一的问题是缩放速度非常慢。这是一张全球约200个点的地图，我希望能够放大/平移并检索每个点的信息。我认为d3看起来比传单好得多，但对于快速缩放/平移功能，我的第一个问题是：这是在传单中更好，还是d3可以处理平滑的缩放/平移，即使它不是基于平铺的

我在下面包含了一段代码：我在这里做错了什么吗？它按原样工作，但有没有办法使缩放运行得更快？提前谢谢！这里的每个人都很乐于助人

function zoomed() {
    console.log("zooming now!")
    ///called on zoom events
d3.selectAll(".centroid").attr("transform", "translate(" +       d3.event.translate + ")scale(" + d3.event.scale + ")");
d3.selectAll(".gratLines").attr("transform", "translate(" +  d3.event.translate + ")scale(" + d3.event.scale + ")");
d3.selectAll(".countries").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
d3.selectAll(".gratBackground").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");

};

function setMap() {

var zoom = d3.behavior.zoom()
    .translate([0, 0])
    .scale(1)
    .scaleExtent([1, 21])
    .on("zoom", zoomed);

console.log("setting map")
var map = d3.select("body")
    .append("svg")
    .attr("width", mapWidth)
    .attr("height", mapHeight)
    .attr("class", "map")

var pageTitle = d3.select("body")
    .append("text")
    .attr("class", "pageTitle")
    .html("UW Hospital Graduates:<br>Where Do They Go?");

var projection = d3.geo.naturalEarth()
    .scale(410)
    .translate([mapWidth / 2, mapHeight / 2])
    .precision(.1);

var path = d3.geo.path()
    .projection(projection);


var path = d3.geo.path()
    .projection(projection)
    .pointRadius(3);

//create graticule generator
var graticule = d3.geo.graticule(); 

//create graticule background (aka water)
var gratBackground = map.append("path")
    .datum(graticule.outline)
    .attr("class", "gratBackground")
    .attr("d", path)
    zoom.on('zoom', zoomed)
    map.call(zoom);

var gratLines = map.selectAll(".gratLines")
    .data(graticule.lines) //
    .enter()
    .append("path") //append one path for each element of the data (in this case, each graticule line)
    .attr("class", "gratLines")
    .attr("d", path) //this path is the variable path defined above. path generator

函数缩放（）{
log（“立即缩放！”）
///调用缩放事件
d3.选择所有（“.centroid”）.attr（“变换”、“平移（+d3.event.translate+”）比例（+d3.event.scale+”））；
d3.选择所有（“.gratLines”）.attr（“转换”、“转换”（+d3.event.translate+））比例（+d3.event.scale+））；
d3.选择所有（“.countries”）.attr（“转换”、“转换”（+d3.event.translate+））比例（+d3.event.scale+））；
d3.选择所有（“.gratBackground”）.attr（“转换”、“转换”（+d3.event.translate+”）比例（+d3.event.scale+”））；
};
函数setMap（）{
var zoom=d3.behavior.zoom（）
.translate（[0，0]）
.比额表（1）
.scaleExtent（[1,21]）
。打开（“缩放”，缩放）；
console.log（“设置映射”）
var map=d3。选择（“主体”）
.append（“svg”）
.attr（“宽度”，地图宽度）
.attr（“高度”，地图高度）
.attr（“类”、“映射”）
var pageTitle=d3.选择（“正文”）
.append（“文本”）
.attr（“类”、“页面标题”）
.html（“华盛顿大学医院毕业生：
他们去哪里？”；
var projection=d3.geo.naturalEarth（）
.比例尺（410）
.translate（[mapWidth/2，mapHeight/2]）
.精度（.1）；
var path=d3.geo.path（）
.投影（投影）；
var path=d3.geo.path（）
.投影（投影）
.点半径（3）；
//创建分划生成器
var graticule=d3.geo.graticule（）；
//创建分划背景（又名水）
var gratBackground=map.append（“路径”）
.基准（分划轮廓）
.attr（“类别”、“背景”）
.attr（“d”，路径）
zoom.on（“缩放”，缩放）
地图调用（缩放）；
var-gratLines=map.selectAll（“.gratLines”）
.数据（分划线）//
.输入（）
.append（“path”）//为数据的每个元素（在本例中为每个分划行）追加一条路径
.attr（“类”、“Gratline”）
.attr（“d”，path）//此路径是上面定义的变量路径。路径生成器

我不熟悉d3.js，但是在这个库中使用

.attr

来处理从类到样式的所有内容真的正确吗？附加到jQuery，其中属性只与HTML属性相关（甚至应该与属性（布尔属性）区分开来），看到

.attr（）

以这种方式使用。