score:1

Accepted answer

Define your scale's domain with your leaves' parent nodes:

color = d3.scaleOrdinal()
.domain(treemap(data).leaves().map(d => {return d.parent.data.name}))
.range(d3.schemeCategory10)

And fill your leaf nodes with the corresponding gradient of color from the range, indexed by data value, applied to the opacity attribute:

.attr("fill", d => { return color(d.parent.data.name) })
.attr("fill-opacity", d => { 
        let min = d3.min(root.leaves().map(leaf => leaf.data.value))
        let max = d3.max(root.leaves().map(leaf => leaf.data.value))
        return (d.data.value-min)/(max-min)  
      })

You get only 3 colors, because you have only 3 parent nodes, but the colors correspond to the those in the docs

See example

EDITED per comment


Related Query

More Query from same tag