如何在d3.v5中使用插图构建可缩放的choropleth地图来处理离散数据？

<script src="https://d3js.org/d3.v5.min.js"></script>

var svg = d3.select("#container")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

d3.json("map.json").then(function(geoData) {
  // 处理地理数据
});

var projection = d3.geoMercator()
                   .fitSize([width, height], geoData);

var path = d3.geoPath()
             .projection(projection);

svg.selectAll("path")
   .data(geoData.features)
   .enter()
   .append("path")
   .attr("d", path)
   .style("fill", function(d) {
     // 根据离散数据设置颜色
   });

var colorScale = d3.scaleSequential()
                   .domain([minValue, maxValue])
                   .interpolator(d3.interpolateBlues);

.style("fill", function(d) {
  var value = d.properties.value; // 获取离散数据的值
  return colorScale(value);
});

var zoom = d3.zoom()
             .scaleExtent([1, 8])
             .on("zoom", zoomed);

svg.call(zoom);

function zoomed() {
  svg.attr("transform", d3.event.transform);
}