Как раскрасить диаграмму с областями на основе значений оси Y в D3. js

Question

У меня проблема с раскрашиванием моего графика на основе последовательной оси y.

Я хочу, например, если мой график находится на y -оси от 0-1000, я необходимо раскрасить его для

• < 500 в «красном»,
• 500-800 в «зеленом»
• > 800 в «желтом».

До сих пор я раскрашивал всю диаграмму на основе min y и max y - например, если мой y = 800 получил зеленый цвет, но мне нужна часть диаграммы, которая < 500 красным и > 500 зеленым.

Данные в массиве: var data = [10, 150, 340, 800, 500, 300].

Я использовал этот подход:

определить colorScale

           var colorScale = d3.scaleLinear()
                .domain(d3.ticks(0, 800, 2))
                .range(["red", "green"]);

добавление к области

       svg.append("path")
                .data([data])
                .attr("class", "area")
                .attr("d", area1)
                .style('fill', function (data) {
                 for (var i=0; i< data.length; i++) {
                    return colorScale(data[i]);
                   }
                });