d3- Цветовая градиентная заливка на основе температуры

Question

Я хочу создать цветовой градиент вдоль оси x диаграммы d3 в качестве области заполнения под диаграммой, и я не уверен, с чего начать.Надеюсь, вы можете помочь:)

Так, например, я рисую линейный график на основе дат и значений. (X и y).Затем под линией я хочу, чтобы цвет заливки отражал температуру для этого дня (более высокие температуры, более теплые цвета и т. Д.).

data = [
    {"date": "2018-04-10"
     "value": "122"
     "temperature" "13"
    },
    {"date": "2018-04-11"
     "value": "129"
     "temperature" "15"
    },
    {"date": "2018-04-12"
     "value": "114"
     "temperature" "17"
    },
    {"date": "2018-04-13"
     "value": "120"
     "temperature" "14"
    },
    {"date": "2018-04-14"
     "value": "139"
     "temperature" "11"
    },
    {"date": "2018-04-15"
     "value": "120"
     "temperature" "10"
    },
    {"date": "2018-04-16"
     "value": "119"
     "temperature" "13"
    }     
   ]

и говорю, что мои цвета

colors = ["red","orange","yellow","green","blue","purple" ]

Я думаю, я бы установил область и заполнил ее функцией, которая будет создавать цвет по вертикали в зависимости от температуры?

  var area = d3.svg.area()
.x(function(d, i) { return x(format.parse(d.date)); })
.y0(height)
.y1(function(d) { return y(d.value); });

  graph.append("path")
.datum(data)
.attr("class", "area")
.attr('fill', areaFill)
.attr("d", area);

Я получил этот код от ЭТО Codepen, чтобы начать меня ... это явно не правильно, но помогает показать, как создать одну цветовую заливку.Итак, как я могу перебрать цвета и назначить градиентную заливку на основе отдельного значения?

Большое спасибо за вашу помощь!Дайте мне знать, если я смогу уточнить