import React from 'react';import * as d3 from "d3";class Map extends React.Component { constructor(props){ super(props); this.Map=React.createRef(); } componentDidMount(){ this.draw(); } handleChangeMap=(provinceName)=>{ this.props.handleChangeMap(provinceName); } draw=()=>{ let svg1=this.Map.current; let svg = d3.select(svg1); const width = +svg.attr('width'); const height = +svg.attr('height'); const margin = {top: 200, right: 200, bottom: 100, left: 200}; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const g = svg.append('g').attr('id', 'maingroup') .attr('transform', `translate(${margin.left}, ${margin.top})`); const projection = d3.geoMercator() .scale(200) .translate([innerWidth/2,innerHeight/2]); const pathGenerator = d3.geoPath().projection(projection); d3.json('./china.json').then( function(data){ console.log(data); // this code is really important if you want to fit your geoPaths (map) in your SVG element; } ); } render(){ return( <svg width="1600" height="800" id="mainsvg" ref={this.Map}></svg> ) }}export default Map;代码如上图，代码排查后发现是使用d3.json函数出错，出错内容为Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0。查了很久官网了，望各位大佬指点我一下