创建后修改 D3 v4 中的地图点

Question

我有一张 D3v4 地图，我希望能够在绘制点后对其进行更改（更改大小、颜色等）。我已经搜索，阅读了各种 D3 教程，从其他地图复制了一些位并尝试了 g.selectAll(".place").attr("d", path.pointRadius(5)) 的许多不同变体，包括 .data 等，似乎没有任何效果。

有人可以告诉我如何构建允许我 select 这些点（实际上是路径）在创建它们之后应用不同的点半径或其他样式的语句吗？

下面的代码只显示了一些点，而不是完整的地图。

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);

创建后修改 D3 v4 中的地图点

Modifying map point in D3 v4 after creation

d3.js

topojson