I have the following JSON data that I need to pass to my D3 function to fill the colours of some blocks on a SVG:

{
  "_116": {
    "scanned": 234,
    "sold": 295
  },
  "_119": {
    "scanned": 175,
    "sold": 207
  },
  "_210": {
    "scanned": 133,
    "sold": 235
  },
  "_118": {
    "scanned": 136,
    "sold": 189
  },
  "_123": {
    "scanned": 63,
    "sold": 160
  },
  "_106": {
    "scanned": 38,
    "sold": 66
  },
  "_108": {
    "scanned": 184,
    "sold": 242
  },
}

The keys in this data correspond with the path id's in my rendered SVG as such:

<path id="_116" serif:id="116" d="M75,22c0,-1.105 0.895,-2 2,-2l31,0c1.105,0 2,0.895 2,2l0,25c0,1.105 -0.895,2 -2,2l-31,0c-1.105,0 -2,-0.895 -2,-2l0,-25Z" style="fill:#fff;fill-rule:nonzero;"/>

I want to use D3 to add the style fill for of all of these path elements based on the data passed in on a linear scale.

Here is what I have so far:

let color = d3.scaleLinear()
            .domain([1,100])
            .range(["white", "green"]);

d3.select("path#_116")
         .style('fill',function(d,i) {
                 return color(10);
          });

This would just fill the value of a single path element with id _116 with the value of 10 with the linear scale of 1 - 100.

How would I make this work so that I map all of my path elements with the data in my JSON based on the keys and so that it uses the domain range of [0 - sold] and the value of the fill as the scanned attribute in my data?