Цветовой градиент на карте дерева d3 на основе другого значения

Question

Я пытаюсь увидеть, можно ли построить диаграмму дерева с помощью d3, где размер поля основан на значении a, а цвет этого поля основан на значении b. Я вижу этот пример https://observablehq.com/@d3 / treemap

Но любые примеры использования двух значений приветствуются. Спасибо

Answer 1

Определите домен вашей шкалы с родительскими узлами ваших листьев:

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

И заполните свои листовые узлы соответствующим градиентом цвета из диапазона, проиндексированного по значению данных, примененного к атрибуту непрозрачности:

.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)  
      })

Вы получаете только 3 цвета, потому что у вас есть только 3 родительских узла, но цвета соответствуют цветам в документах

См. пример

РЕДАКТИРОВАНИЕ за комментарий