How to use d3-geo-projection - 10 common examples

getWinkel3Projection = () => {
        var lo = this.props.lo || 114.53; // x
        var la = this.props.la || 35.21; // y
        //console.log(geoProjection);

        //  https://www.bootcdn.cn/d3-geo-projection/readme/
        // https://github.com/d3/d3-geo-projection/blob/master/src/winkel3.js
        // https://bl.ocks.org/mbostock/3682676

        //console.log("this.props.scale()  is ",this.props.scale);
        this.props.scale = this.props.scale || 0.6;

        return geoProjection.geoWinkel3()
            .center([0, la])
            .rotate([-lo, 0])
            .scale(this.getWidth() * this.props.scale)
            //  .translate([this.getWidth() / 2, this.getHeight() / 2])   // amormaid
            .translate([window.innerWidth / 2, (window.innerHeight - 100) / 2])
            .precision(1);
    }

this.element.innerHTML = '';

    if (!width || !height) return;

    const d3Container = d3_select(this.element);

    const svg = d3Container
      .append('svg')
      .attr('width', width)
      .attr('height', height);

    const geoParent = svg.append('g').attr('data-test', testId);
    const container = geoParent.append('g');

    const projection = useRobinsonProjection === true ? d3_geoRobinson() : d3_geoMercator();
    const path = d3_geoPath().projection(projection);
    d3_json(topoJSONPath, (error, topoJSON) => {
      if (!topoJSON) return;
      const features = topojsonFeature(topoJSON, topoJSON.objects[topoJSONRoot]);
      // Filter Antartica
      const filteredFeatures = features.features.filter(f => f.properties.iso2 !== 'AQ');
      const polygons = container
        .selectAll('path')
        .data(filteredFeatures)
        .enter()
        .append('path')
        .attr('class', d => `polygon ${getPolygonClassName(d)}`)
        .attr('data-test', d => getPolygonTestId && getPolygonTestId(d, testId))
        .attr('d', path);

      if (showTooltipCallback !== undefined) {

export default (className, { topoJSONPath, topoJSONRoot, getPolygonClassName, showTooltipCallback, hideTooltipCallback, useRobinsonProjection, legend }) => {
  const d3Container =  d3_select(className);
  d3Container.node().classList.remove('-with-legend');
  const containerComputedStyle = window.getComputedStyle(d3Container.node());
  const width = parseInt(containerComputedStyle.width);
  const height = parseInt(containerComputedStyle.height);

  const svg = d3Container.append('svg')
    .attr('width', width)
    .attr('height', height);

  const geoParent = svg.append('g');
  const container = geoParent.append('g');

  const projection = (useRobinsonProjection === true) ? d3_geoRobinson() : d3_geoMercator();
  const path = d3_geoPath()
    .projection(projection);

  d3_json(topoJSONPath, function(error, topoJSON) {
    const features = topojson.feature(topoJSON, topoJSON.objects[topoJSONRoot]);

    const polygons = container.selectAll('path')
      .data(features.features)
      .enter()
      .append('path')
      .attr('class', d => {
        return `polygon ${getPolygonClassName(d)}`;
        // return isCurrent(d) ? 'polygon -isCurrent' : 'polygon';
      })
      .attr('d', path);

it('geoProject(feature, projection)', () => {
    expect(dv.geoProject(feature0, 'geoAiry')).to.eql(d3GeoProjection.geoProject(feature0, d3GeoProjection.geoAiry()));
  });
  it('geoProjectByName(name, projection)', () => {

it('geoProjectByName(name, projection)', () => {
    expect(dv.geoProjectByName(name0, 'geoAiry')).to.eql(
      d3GeoProjection.geoProject(feature0, d3GeoProjection.geoAiry())
    );
  });
  it('geoProjectPosition(position, projection)', () => {

it('geoProjectInvert(point, projection)', () => {
    expect(dv.geoProjectInvert([300, 300], 'geoAiry')).to.eql(d3GeoProjection.geoAiry().invert([300, 300]));
  });
});

@computed get World(): GeoPath {
        const projection = geoRobinson() as GeoProjection
        const path = geoPath().projection(projection)
        return path
    }

export default function (mapData, proj, scale, position, identifier, shapeKey) {
  let projection = 'sphere';
  switch (proj) {
    case ('Mercator'): projection = d3.geoMercator(); break;
    case ('Robinson'): projection = d3GeoProjection.geoRobinson(); break;
    case ('Gall-Peter'): projection = d3GeoProjection.geoCylindricalEqualArea.parallel(45); break;
    case ('Winkel-Tripel'): projection = d3GeoProjection.geoWinkel3(); break;
    case ('Equirectangular'): projection = d3.geoEquirectangular(); break;
    case ('Natural Earth1'): projection = d3.geoNaturalEarth1(); break;
    case ('AlbersUSA'): projection = d3.geoAlbersUsa(); break;
    default: projection = 'sphere'; break;
  }
  let features = topojson.feature(mapData, mapData.objects[shapeKey]).features;
  if(!proj){
    let countries = features.map((d, i) => d[identifier])
    let obj1 = {}
    for (let i = 0; i < countries.length; i++) {
      obj1[countries[i]] = features[i]
    }
    let names1 = Object.keys(obj1);
    let geoData1 = []

export default function (long, lat, proj, scale, position) {
  let projection;
  switch (proj) {
    case ('Mercator'): projection = d3.geoMercator(); break;
    case ('Robinson'): projection = d3GeoProjection.geoRobinson(); break;
    case ('Gall-Peter'): projection = d3GeoProjection.geoCylindricalEqualArea.parallel(45); break;
    case ('Winkel-Tripel'): projection = d3GeoProjection.geoWinkel3(); break;
    case ('Equirectangular'): projection = d3.geoEquirectangular(); break;
    case ('Natural Earth1'): projection = d3.geoNaturalEarth1(); break;
    default: projection = d3GeoProjection.geoRobinson(); break;
  }
  let projection_scale = projection
    .scale(scale)
    .translate([position[0], position[1]]);

  return (projection_scale([long, lat]));
}

geoProject(feature: ExtendedFeature, projection: string, exportRaw?: boolean) {
    projection = getGeoProjection(projection, exportRaw);
    return geoProject(feature, projection);
  },
  geoProjectByName(this: View, name: string, projection: string, exportRaw?: boolean) {