Question

所以，我有一个可以工作的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

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

0 个答案: