具有多色渐变的面积图答案

【问题标题】：Area chart with multicolour gradient具有多色渐变的面积图
【发布时间】：2017-04-18 18:04:02
【问题描述】：

我想构建一个类似于以下内容的图表： Elevation over distance

这张图表显示了 3 件事：海拔 (y) 距离 (x) 和颜色代表梯度变化。如何使用 D3.js 复制它？

【问题讨论】：

您在Example网站上查看样品了吗？

【解决方案1】：

您可以在samples 中查看样品，并根据您的要求选择适合您的产品。但我建议像 this 或 this 。第一个不给你变色能力。您可能需要阅读文档并找出答案。您可以在将条形宽度减小到非常小时后使用第二个。您可能需要对其进行转换以适应您的数据输入方法。我强烈建议您浏览这些样本。作为帮助，我发布了更多可以自定义的示例。

Area Gradient fill

Applying a colour gradient to an area fill in d3.js

【讨论】：

我想坚持使用面积图，因为它代表地理数据，当海拔应用于图表时，您可以看到远处的山丘。添加颜色渐变有助于了解山坡的陡峭程度。
好的。您仍然可以在Samples 网站上自定义一些示例。我会用你可以定制的新样本来改变答案。
现在检查我的答案。
在写到这里之前，我浏览了很多例子。我的最后一次尝试是这样的：plnkr.co/edit/SoWTD7nwB6Vv2fDocDyq 它不代表原始图表（请看图片）在做什么。渐变水平或垂直应用于整个图形，在我的情况下，我只需要为区域图的位着色。
根据您想要特定颜色的细竖条的图片。那么为什么不尝试自定义条形图以使其具有更细的条形呢？