Question

我试图使用react-d3-map和来自topojson的数据来映射美国的县。我还没有能够从网上获得任何一个例子，并认为我可能会遗漏一些东西。这是我到目前为止的代码：

import React from "react";
import { connect, Provider } from "react-redux";
var topojson = require('topojson');
var Map = require('react-d3-map').Map;
var PolygonGroup = require('react-d3-map').PolygonGroup;

@connect(state =>({}))
export default class ServiceAreaAppContainer extends React.Component {

    constructor(props) {
        super(props);
        this.state = {'loading': true}
    }

  componentDidMount() {
    $.ajax({ url:"https://unpkg.com/us-atlas@1/us/10m.json"}).success(function(res){
        console.log("Response!");
        console.log(res);

        this.setState({map_info:res, loading: false});
     }.bind(this));
  }

  render() {
    if (!this.state.loading) {
        var test = topojson.feature(this.state.map_info, this.state.map_info.objects.counties);
        console.log(test);
        return <Map
            width= {500}
            height= {500}
            scale= {1200 * 5}
            scaleExtent= {[1 << 12, 1 << 13]}
            center= {[30.31, -97.64]}
          >
            <PolygonGroup
              key= {"polygon-test"}
              dataPolygon= {test.features}
            />
          </Map>
    } else {
        return <h4>Loading...</h4>
    }
  }
}

我能够毫无问题地加载数据，并且我使用topojson.feature(this.state.map_info, this.state.map_info.objects.counties)将数据转换为react-d3-map所需的geojson。关于我在这里做错了什么的提示？

使用react-d3-map和topojson来映射美国的县

0 个答案: