在創建D3 v4後修改地圖點

Question

我有一個D3v4地圖，我希望能夠在繪製完成後更改點（更改大小，顏色等）。我已經搜索，閱讀了各種D3教程，從其他地圖複製了一些位，並嘗試了很多不同的g.selectAll（「。place」）。attr（「d」，path.pointRadius（5）），包括.data等而沒有任何東西似乎起作用。

有人能告訴我如何構建聲明，使我可以在創建這些點（實際上是路徑）之後選擇這些點並在其上應用不同的點半徑或其他樣式？

下面的代碼只顯示了一些點而不是完整的地圖。

var msoac = {"type":"Topology","arcs":[],"transform":{"scale":[0.0008059840222022202,0.0005849051685168519],"translate":[-6.311690349,49.9156999]},"objects":{"msoa_centroids_geo":{"type":"GeometryCollection","geometries":[{"type":"Point","properties":{"MSOA11CD":"E02002536","MSOA11NM":"Stockton-on-Tees 002"},"coordinates":[6223,8027]},{"type":"Point","properties":{"MSOA11CD":"E02002537","MSOA11NM":"Stockton-on-Tees 003"},"coordinates":[6246,8028]},{"type":"Point","properties":{"MSOA11CD":"E02002534","MSOA11NM":"Redcar and Cleveland 020"},"coordinates":[6524,7885]},{"type":"Point","properties":{"MSOA11CD":"E02002535","MSOA11NM":"Stockton-on-Tees 001"},"coordinates":[6234,8046]},{"type":"Point","properties":{"MSOA11CD":"E02002532","MSOA11NM":"Redcar and Cleveland 018"},"coordinates":[6518,7901]},{"type":"Point","properties":{"MSOA11CD":"E02002533","MSOA11NM":"Redcar and Cleveland 019"},"coordinates":[6506,7886]},{"type":"Point","properties":{"MSOA11CD":"E02002530","MSOA11NM":"Redcar and Cleveland 016"},"coordinates":[6650,7904]},{"type":"Point","properties":{"MSOA11CD":"E02002538","MSOA11NM":"Stockton-on-Tees 004"},"coordinates":[6230,8002]},{"type":"Point","properties":{"MSOA11CD":"E02002539","MSOA11NM":"Stockton-on-Tees 005"},"coordinates":[6150,8020]},{"type":"Point","properties":{"MSOA11CD":"E02005740","MSOA11NM":"Northumberland 020"},"coordinates":[5880,8927]}]}}} 

var width = 960, 
    height = 1160; 


var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .call(d3.zoom().on("zoom", function() { 
     svg.attr("transform", "translate(" + transform.x + "," + transform.y + ") scale(" + transform.k + ")") 
     })); 

g = svg.append("g"); 


var projection = d3.geoAlbers() 
    .center([0, 52.4]) 
    .rotate([4.4, 0]) 
    .parallels([50, 60]) 
    .scale(6000) 
    .translate([width/2, height/2]); 

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

g.selectAll(".points_10") 
    .data(topojson.feature(msoac, msoac.objects.msoa_centroids_geo).features) 
    .enter().append("path") 
    .attr("d", path) 
    .attr("d", path.pointRadius(3)) 
    .attr("class", "place"); 

在此先感謝任何人提供的幫助。我希望這對某人很容易。

Answer 1

應該是相當直截了當：

var points = g.selectAll(".points_10") 
.data(topojson.feature(msoac, msoac.objects.msoa_centroids_geo).features) 
.enter().append("path") 
.attr("d", path.pointRadius(3)) 
.attr("class", "place") 

// and then something like: 
points 
.transition() 
    .attr("d", path.pointRadius(50)) 
    .attr("fill","yellow") 
    .duration(2000) 
.transition() 
    .attr("fill","steelblue") 
    .duration(1000) 
.transition() 
    .attr("stroke-width",5) 
    .attr("stroke","orange") 
    .duration(1000) 
.transition() 
    .attr("stroke-width",1) 
    .attr("stroke","steelblue") 
    .attr("fill","black") 
    .attr("d",path.pointRadius(5)) 
    .duration(1000);