Блог

Я хочу раскрасить разные части карты разными цветами в зависимости от существующего значения. Карта разделена на округа, и у меня есть значения для каждого округа, которые я хочу перевести в цвет. Это мой код для попытки раскрасить карту.

Диапазон, который я установил, находится между [ 40, 19054 ] . Он хорошо работает, окрашивая всю карту в один цвет, поэтому, например, установка цвета(19000) сделает всю карту красной.

 let topo = json.features  let datas = aggCounties    d3.json("/counties.json").then(function(json) {  function getCountPerKOMKODE() {  for (let i = 0; i lt; topo.length; i  ) {  for (let j = 0; j lt; datas.length; j  ) {  let jsonKOMKODE = json.features[i].properties.KOMKODE;  let csvKOMKODE = datas[j].kommune_kode  let csvCOUNT =  datas[j].count    if (csvKOMKODE == jsonKOMKODE) {  return csvCOUNT  }  }  }    }  }   let color = d3.scaleQuantize()  .domain(d3.extent(getRangeDomain()))  .range(["white", "pink", "red"])    let g = svg.append("g");    g.selectAll("path").append("g")  .data(topo)  .enter()  .append('path')  .attr('class', 'county')  .attr("d", path)  .style('fill', color(getCountPerKOMKODE()))  });  

Мне кажется, что я неправильно понимаю процесс того, как окрашена карта? Из того, что я читал, он должен ориентироваться на отдельные пути и применять заданный цвет/значение?

Спасибо

РЕДАКТИРОВАТЬ — проблема решена, благодаря @AndrewReid, см. Обновления кода ниже:

 function getCountPerKOMKODE(path) {  for (let j = 0; j lt; datas.length; j  ) {  // var jsonKOMKODE = json.features[j].properties.KOMKODE;  let csvKOMKODE = datas[j].kommune_kode  let csvCOUNT =  datas[j].count   if (csvKOMKODE == path) {  return csvCOUNT  }  }  }  g.selectAll("path").append("g")  .data(topo)  .enter().append('path').attr('class', 'county')  .attr("d", path).style('fill', function(d,i) {  let komkode = d.properties.KOMKODE  return color(getCountPerKOMKODE(komkode))  })  

И вуаля, карта теперь раскрашена.