我制作了下面的Map，通过使用d3.js在mapboxMap上叠加点。
我正在尝试缩放Map，以便Map范围仅包括d3标记（点）。
我认为伪代码看起来像这样：

//find the northernmost, easternmost, southernmost, westernmost points in the data

//get some sort of bounding box?

//make map extent the bounding box?

现有程式码：

<div id="map"></div>
<script>
  mapboxgl.accessToken = "YOUR_TOKEN";
  var map = new mapboxgl.Map({
    container: "map",
    style: "mapbox://styles/mapbox/streets-v9",
    center: [-74.5, 40.0],
    zoom: 9
  });

  var container = map.getCanvasContainer();
  var svg = d3
      .select(container)
      .append("svg")
      .attr("width", "100%")
      .attr("height", "500")
      .style("position", "absolute")
      .style("z-index", 2);

function project(d) {
  return map.project(new mapboxgl.LngLat(d[0], d[1]));
}

#Lat, long, and value
var data = [
  [-74.5, 40.05, 23],
  [-74.45, 40.0, 56],
  [-74.55, 40.0, 1],
  [-74.85, 40.0, 500],
];

var dots = svg
  .selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 20)
  .style("fill", "#ff0000");

function render() {
  dots
    .attr("cx", function (d) {
      return project(d).x;
    })
    .attr("cy", function (d) {
      return project(d).y;
    });
}

map.on("viewreset", render);
map.on("move", render);
map.on("moveend", render);
render(); // Call once to render

</script>

更新日期：

我在https://data-map-d3.readthedocs.io/en/latest/steps/step_03.html找到了以下代码以供参考：

function calculateScaleCenter(features) {
  // Get the bounding box of the paths (in pixels!) and calculate a
  // scale factor based on the size of the bounding box and the map
  // size.
  var bbox_path = path.bounds(features),
      scale = 0.95 / Math.max(
        (bbox_path[1][0] - bbox_path[0][0]) / width,
        (bbox_path[1][1] - bbox_path[0][1]) / height
      );

  // Get the bounding box of the features (in map units!) and use it
  // to calculate the center of the features.
  var bbox_feature = d3.geo.bounds(features),
      center = [
        (bbox_feature[1][0] + bbox_feature[0][0]) / 2,
        (bbox_feature[1][1] + bbox_feature[0][1]) / 2];

  return {
    'scale': scale,
    'center': center
  };
}

但是，当我运行函数时：

var scaleCenter = calculateScaleCenter(data);
  console.log("scalecenter is", scaleCenter)

我得到错误：

path is not defined

此外，我似乎需要动态调整mapboxMap的center和zoom参数，我是否可以使用calculateScaleCenter函数生成的值来动态设置这些值？
如果有人能给我指出正确的方向，我会很感激的！谢谢。