单击以更改缩放大小d3.js

Question

我是D3.js的初学者，并且有一个基于示例here的项目，该项目用于构建在国家/地区使用点击缩放功能的地图。它特别适合重新缩放边框，但是我在处理路径点（用于入口处的GeoJSON数据）的大小时遇到​​了麻烦，当单击以进行缩放时，路径点似乎很大。图像中的示例是 here

[我看到许多讨论都有相同的问题，但是讨论的是圆圈而不是路径，对于编码来说似乎不是同一问题。

这是我使用的源代码：

var startYear = 1990,
currentYear = startYear;

const width = 960, height = 600;

const path = d3.geoPath();

const projection = d3.geoMercator()
  .center([2.5, 46.5])
  .scale(1000)
  .translate([width/2, height/2]);

path.projection(projection);

const svg = d3.select('#carte')
  .append("svg")
  .attr("id", "svg")
  .attr("width", width)
  .attr("height", height);

const pays = svg.append("g");
pays.selectAll("path")
  .data(geojson_pays.features)
  .enter()
  .append("path")
  .attr("d", path)
  .style("fill", "#e6e6e6")
  .style("stroke-width", 2)
  .style("stroke", "#fff")
  .on("click", clicked);

const villes = svg.append("g");
villes.selectAll("path")
  .data(geojson_villes.features)
  .enter()
  .append("path")
  .attr("d", path)
  .style("fill", "black")
  .style("stroke", "white")
  .style("stroke-width", 0.5)
  .style("stroke-linecap", "square");

const capitales = svg.append("g");
capitales.selectAll("path")
  .data(geojson_capitales.features)
  .enter()
  .append("path")
  .attr("d", path)
  .style("fill", "blue")
  .style("stroke", "black")
  .style("stroke-width", 3);

villes.selectAll("path").filter(function(d) {
  return d.properties.nom != "NULL";
  }).on("mouseover", function(d) {
  d3.select(this)
    .style("fill", "blue")
.style("stroke", "black")
.style("stroke-width", 1.5)
.style("cursor", "pointer");
}).on("mouseout", function(d) {
  d3.select(this)
    .style("fill", "black")
    .style("stroke", "white")
    .style("stroke-width", 2)
tooltip.transition()    
        .duration(500)    
        .style("opacity", 0);
}).on("click",function(d){
tooltip.html(d.properties.nom + "<br />Date : " + d.properties.date);
})

function clicked(d) {
 var bounds = path.bounds(d),
  dx = bounds[1][0] - bounds[0][0],
  dy = bounds[1][1] - bounds[0][1],
  x = (bounds[0][0] + bounds[1][0]) / 2,
  y = (bounds[0][1] + bounds[1][1]) / 2,
  scale = .9 / Math.max(dx / width, dy / height),
  translate = [width / 2 - scale * x, height / 2 - scale * y];

  pays.selectAll("path").transition().duration(750).style("stroke-width", 1.5 / scale 
  +"px").style("width", 1.5 / scale + "px").style("height", 1.5 / scale + "px").attr("transform", 
  "translate(" + translate + ")scale(" + scale + ")");
  villes.selectAll("path").transition().duration(750).style("stroke-width", 1.5 / scale + 
  "px").attr("transform", "translate(" + translate + ")scale(" + scale + ")");
  capitales.selectAll("path").transition().duration(750).style("stroke-width", 1.5 / scale + 
  "px").attr("transform", "translate(" + translate + ")scale(" + scale + ")");
  }

我将非常感谢您提出的解决方案！

Answer 1

通过使用path.pointradius函数，我实际上做到了。例如在单击的函数中，在selectAll（“ path”）部分中添加：

.attr("d", path.pointRadius(2))

要获得缩放，请选择2px大路径。