D3縮放比例尺地圖，而不是點

Question

我點擊地圖時放大地圖，但緯度經度點不縮放。它們呈現爲圓形，我希望它們隨地圖一起移動。我在這裏繼D3模板：http://bl.ocks.org/mbostock/2206590

var map_width = 960, 
    map_height = 500, 
    jsonRoot = '/static/d3/json/', 
    centered; 

var projection = d3.geo.albersUsa() 
.scale(1070) 
.translate([map_width/2, map_height/2]); // default projection type for d3.geo.path 
var urls = { 
    counties: jsonRoot + "us-counties.json", 
    states: jsonRoot + "us-states.json" 
} 
, margin = { top: 0, right: 0, bottom: 0, left: 0 } 
, width = 960 - margin.right - margin.left 
, height = 500 
, path = d3.geo.path().projection(projection) 
, map; 

var q = queue() 
    .defer(d3.json, jsonRoot + "us-counties.json") 
    .defer(d3.json, jsonRoot + "us-states.json") 
    .await(ready); 

function ready(error, countylines, statelines) { 
window.error = error; 
window.countylines = countylines; 
window.statelines = statelines; 

if (error){ 
    throw error; 
} 

var stateIds = {}; 
statelines.features.forEach(function(d) { 
    stateIds[d.id] = d.properties.name; 
}); 

countylines.features.forEach(function(d) { 
    d.properties.state = stateIds[d.id.slice(0,2)]; 
}) 

// remove the loading text 
d3.select('.loading').remove(); 

map = d3.select('#map').append('svg') 
    .style('width', width) 
    .style('height', height); 

counties = map.append('g') 
    .attr('class', 'counties') 
    .selectAll('path') 
    .data(countylines.features) 
    .enter().append('path') 
    .attr('d', path); 

counties.on('mouseover', showCaption) 
    .on('mousemove', showCaption) 
    .on('mouseout', function() { 
     caption.html(starter); 
    }) 
    .on('click', clicked); 

states = map.append('g') 
    .attr('class', 'states') 
    .selectAll('path') 
    .data(statelines.features) 
    .enter().append('path') 
    .attr('d', path); 


// Captions 
var caption = d3.select('#caption') 
    , starter = caption.html(); 

function showCaption(d, i) { 
     var name = [d.properties.name, d.properties.state].join(', '); 
    caption.html(name); 
} 

var systemSuccess = function(result){ 
    console.log(result); 
} 

    var site = map.append("circle") 
     .attr("r",5) 
     .classed("system", true) 
     .attr("latitude",37.77521) 
     .attr("longitude",-122.42854) 
     .attr("transform", function() { 
     return "translate(" + projection([-122.42854,37.77521]) + ")"; 
    }); 

    }); 
}) 
}; 

function clicked(d) { 
var x, y, k; 

if (d && centered !== d) { 
    var centroid = path.centroid(d); 
    x = centroid[0]; 
    y = centroid[1]; 
    k = 4; 
    centered = d; 
} else { 
    x = width/2; 
    y = height/2; 
    k = 1; 
    centered = null; 
} 

counties.selectAll("path") 
.classed("active", centered && function(d) { return d === centered; }); 

counties.transition() 
.duration(750) 
.attr("transform", "translate(" + width/2 + "," + height/2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")") 
.style("stroke-width", 1.5/k + "px"); 

states.transition() 
.duration(750) 
.attr("transform", "translate(" + width/2 + "," + height/2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")") 
.style("stroke-width", 1.5/k + "px"); 

map.selectAll(".system") 
.attr("transform", function(d) { return "translate(" + projection([-122.42854, 37.77521 ]) + ")" }); 
} 
}); 

的地圖比例尺適當。但不是要點。

所有幫助表示讚賞！

Answer 1

由於Lars suggested，您可以執行以下操作。

//Same projection and transformation as applicable to the path elements.  
d3.selectAll("circle") 
.transition() 
.duration(750) 
.attr("transform", "translate(" + width/2 + "," + height/2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")") 

我不知道，如果上面的代碼會正常工作......雖然我已經使用通過「放大」 D3行爲相似的前提。

如果你想讓你的積分保持其大小，但在正確的位置;你可以縮放 OR 嘗試語義你可以繼續基於這樣規模的調整圓的半徑：

d3.selectAll("circle") 
.attr("r", 5/k);