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

Question

我找到了以下代码来放大一个简单的D3解决方案，该解决方案适用于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-zoom的其他例子中使用的字段。虽然我已经用缩放功能替换translate transform，但我不知道用什么来取代d3.event.scale。

Answer 1

如果您将代码从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字符串，但Callback Refs

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