SOURCE

console 命令行工具 X clear

                    
>
console

function draw(){
  $.get('https://geo.datav.aliyun.com/areas/bound/100000_full.json',(root)=>{
    let chinajson = root;
    var height = 400;
var width = 330;
var texts, centered;
var color = {
  lineColor: "#4AFFFE",
  pointColor: "#fbcd2c",
  lightColor: "#4affff",
  areaColor: ["#09373a", "#11545c", "#0b6c79", "#769398"],
  locationBgColor: "#0e403f",
  pointTextColor: "#fff",
  haveSelectColor: "#1c2b2b"
};
var scale = 1;
var projection = d3.geo.mercator()
  .center([100, 36])
  .scale(200)
  .translate([width / 2, height / 2]);
var path = d3.geo.path()
  .projection(projection);
var svg = d3.select("#map").append('svg')
  .attr('id', "mapSvg")
  .attr('width', width)
  .attr('height', height);

svg.append("rect")
  .attr("class", "background")
  .attr("width", width)
  .attr("height", height)

var mapG = svg.append('g')
  .attr('id', "mapG");

mapG.selectAll("path")
  .data(chinajson.features)
  .enter()
  .append("path")
  .attr("stroke", color.lineColor)
  .attr("stroke-width", 1)
  .attr("fill", "#000")
  .attr("style", "display:block")
  .attr("style", "cursor:pointer;")
  .attr("d", path)

  })
}

draw();
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/d3/3.5.15/d3.min.js"></script>
  <div id='map'>
  </div>
#map {
  width:330px;
  height: 400px;
  background: #fff;
}