Изменение точки карты в 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);