1

d3js v7

using geojson to draw a china map, i can't fill color to any area.

let width = 700;
let height = 700;
var projection = d3
  .geoMercator()
  .scale(width * 0.75)
  .center([121, 38]);

var path = d3.geoPath().projection(projection);

var map = d3
  .select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

d3.json(
  "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full"
).then((data: any) => {
  map
    .selectAll("path")
    .data(data.features)
    .enter()
    .append("path")
    .attr("d", path)
    .attr("fill", "none")
    .attr("stroke", "black");
});

when fill color with none, it can work enter image description here

when using other color, it fail

attr("fill", "#0ea5e9")

enter image description here

Robin Mackenzie
  • 18,801
  • 7
  • 38
  • 56
Lin Weiye
  • 185
  • 2
  • 13
  • 1
    If you bring your `projection` and `path` inside the block where your draw the paths you can use `geoIdentity` and `reflectY` etc to get what you want. If you're not sure I will post an example, but the answer in the other question is really very comprehensive. – Robin Mackenzie Jul 30 '22 at 10:15
  • Great, it work prefect. thanks you very much, It's any tutorial about projection? – Lin Weiye Jul 30 '22 at 10:50
  • Just googling :D - https://www.sohamkamani.com/blog/javascript/2019-02-18-d3-geo-projections-explained/ – Robin Mackenzie Jul 30 '22 at 11:25

1 Answers1

1

change the projection by using geoIdentity and reflectY

let projection = d3
    .geoIdentity()
    .reflectY(true)
    .fitSize([width, height], data);

enter image description here

Lin Weiye
  • 185
  • 2
  • 13