Reactjs 使用D3+JS进行世界地图缩放

我在一个简单的D3解决方案中找到了以下zoom代码，该解决方案与Javascript配合良好：

var zoom = d3.behavior.zoom()
        .on("zoom", function() {
            projection.translate(d3.event.translate).scale(d3.event.scale);
            feature.attr("d", path);
            circle.attr("transform", ctr);
        })
        ;

zoom.translate(projection.translate())
            .scale(projection.scale())
            .scaleExtent([h / 6, h])
        ;

当我试图在D3+ReactJS中转换这段代码时，我遇到了一些问题。自从我尝试了这么多不同的解决方案以来，已经有很多了。最新的一张把我的世界地图放大了一次，但是一片混乱

这是我的代码：

import React, { Component } from 'react';
import 'd3';
import * as d3Z from 'd3-zoom'
import * as d3 from 'd3-selection';
//import d3Scale from 'd3-scale'
import { geoMercator, geoPath } from 'd3-geo';
import './WorldMap.css';
import countries from '../resources/world-countries.json';

//
export default class WorldMap extends Component {

  componentDidUpdate() {

    const width = 1300, //document.body.clientWidth,
      height = 600;//document.body.clientHeight;
    const circleRadius = 2;
    const lstRadius = [7, circleRadius];
    const lstColor = ["green", "white"];
    const duration = 500;
    const lstShots = [];
    const projection = geoMercator();
    const path = geoPath()
      .projection(projection);

    const d3Zoom = d3Z.zoom();


    for (var i = 0; i < this.props.data.length; i++) {

        lstShots.push(JSON.parse(JSON.stringify(this.props.data[i])));
    }

    const getCirclePos = (d) => {
      return "translate(" + projection([d.long, d.lat]) + ")";
    }

    const svgObj = d3.select(this.refs.svgMap);

    const feature = svgObj
      .selectAll("path.feature")
      .data(countries.features)
      .enter().append("path")
      .attr("class", "feature");

    projection
      .scale(width / 6.5)
      .translate([width / 2, height / 1.6]);

    const zoom = d3Zoom
                  .on("zoom", function() {

                    console.log(d3.event);
                      projection.translate([d3.event.transform.x, d3.event.transform.y]).scale(d3.event.scale);
                      feature.attr("d", path);
                    //  circle.attr("transform", getCirclePos);
                  })
                  ;

    svgObj.call(zoom);

// console.log(zoom);

    // zoom.translateTo(projection.translate())
    //           .scale(projection.scale())
    //           .scaleExtent([height / 6, height])
    //       ;

    feature.attr("d", path);
    // eslint-disable-next-line
    const circle = svgObj.selectAll("circle")
      .data(lstShots)
      .enter()
      .append("circle")
      .attr("r", circleRadius)
      .attr("fill", 'white')
      .attr("transform", getCirclePos)
      .attr("node", function(d) { return JSON.stringify(d); })
      .style("cursor", "pointer");


  }

  render() {
    return (

      <svg ref="svgMap"></svg>
    );
  }
}

---

问题是d3.event不包含translate或scale字段，我看到人们在其他d3缩放示例中使用了这些字段。虽然我在缩放功能中用transform替换了translate，但我不知道用什么替换d3.event.scale。

如果您需要将代码从d3v3移植到d3v4，那么d3.event.scale在d3v4中不存在

projection.translate([d3.event.transform.x, d3.event.transform.y]).scale(d3.event.transform.k);

你也需要初始化缩放

svgObj.call(zoom);
svgObj.call(zoom.transform, d3.zoomIdentity.translate(projection.translate()[0], projection.translate()[1]).scale(projection.scale()));

不要使用ref字符串，而是

---

我需要使用componentDidMount来查看任何内容。

如果您将代码从d3v3移植到d3v4，则需要全部完成，d3v4中不存在d3.event.scale

projection.translate([d3.event.transform.x, d3.event.transform.y]).scale(d3.event.transform.k);

你也需要初始化缩放

svgObj.call(zoom);
svgObj.call(zoom.transform, d3.zoomIdentity.translate(projection.translate()[0], projection.translate()[1]).scale(projection.scale()));

不要使用ref字符串，而是

---

我需要使用componentDidMount来查看任何内容。

示例中使用了哪个版本的d3，您使用哪个版本的d3？d3 v4 sir……。示例中使用了哪个版本的d3，您使用哪个版本的d3？d3 v4 sir……。我昨天尝试了scaled3.event.transform.k，但它不起作用。真正的问题是组件会定期更新，而我的代码是用componentDidUpdate编写的。所以zoom只在组件更新之前起作用。我昨天确实尝试了scaled3.event.transform.k，但它不起作用。真正的问题是组件会定期更新，而我的代码是用componentDidUpdate编写的。因此，缩放仅在组件更新之前有效。