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

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

1 个答案: