var width = 960, height = 600; var projection = d3.geoMercator().center([105, 38]).scale(750).translate([width / 2, height / 2]), path = d3.geoPath().projection(projection); var svg = d3.select(\”#themify_builder_content-1267\”).append(\”svg\”) .attr(\”class\”, \”chart-area\”) .attr(\”width\”, width) .attr(\”height\”, height); var tooltip = d3.select(\”#themify_builder_content-1267\”).append(\”div\”) .attr(\”class\”, \”tooltip\”) .style(\”opacity\”, 0); var promises = [ d3.json(\”http://sommersydnie.com/static/data/china_cities.json\”), d3.json(\”http://sommersydnie.com/static/data/china_provinces_topo.json\”) ] Promise.all(promises).then(data => { const cnCities = data[0]; const cnProvences = data[1]; console.log(cnProvences); var geojson = topojson.feature(cnProvences, cnProvences.objects.china_provinces); console.log(geojson); svg.append(\”g\”) .attr(\”class\”, \”provinces\”) .selectAll(\”path\”) .data(geojson.features) .enter() .append(\”path\”) .attr(\”d\”, path) .attr(\”stroke\”, \”grey\”) .attr(\”stroke-width\”, \”1.5\”); svg.append(\”g\”) .attr(\”class\”, \”cities\”) .selectAll(\”path\”) .data(cnCities.features) .enter() .append(\”path\”) .attr(\”d\”, path) .attr(\”stroke\”, \”black\”) .attr(\”stroke-width\”, \”0.1\”) .on(\”mouseover\”, function(d) { d3.select(this).attr(\’fill\’, \’rgb(82, 97, 1, 0.8)\’); tooltip.transition() .duration(200) .style(\”opacity\”, .9); tooltip.html(d.properties.name) .style(\”left\”, (d3.event.pageX – 40) + \”px\”) .style(\”top\”, (d3.event.pageY – 88) + \”px\”); }) .on(\”mouseout\”, function(d) { d3.select(this).attr(\’fill\’, \’none\’); tooltip.transition() .duration(500) .style(\”opacity\”, 0); }); })