Question

我正在尝试沿着d3图表的x轴创建一个颜色渐变，作为图表下方的填充区域，我不确定从哪里开始。希望您能提供帮助：）

例如，我根据日期和值（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);

我从THIS Codepen那里获得了这段代码来开始学习……这显然不正确，但是可以帮助您说明如何创建单一颜色填充。那么，如何遍历颜色并根据单独的值分配渐变填充？

非常感谢您的帮助！让我知道是否可以澄清

d3-基于温度的颜色渐变填充

0 个答案: