Javascript 如何使用d3js制作颜色渐变条

我试图用d3js实现一个渐变条，所以通过给出2种颜色，我需要显示渐变颜色，从第一个颜色值开始，以另一个颜色值结束

因此，它看起来与此类似：

---

这是我使用六边形容器实现的散点图的图例，其中容器颜色表示每个点上的频率。由于我正在动态构建数据，因此需要将其附加到另一个动态构建的SVG中。

您可以在SVG DEF中创建渐变，然后将其应用于任何SVG形状

这里有一些d3代码

调整颜色数组使代码数据驱动

变量颜色=['rgb255,0,0'，'RGB255255,0']； var svg=d3。选择“body” .append'svg' .attr'width'，100 .attr'height'，200； var grad=svg.append'defs' .附加'linearGradient' .attr'id'，grad' .attr'x1'，0%' .attr'x2'，0%' .attr'y1'，0% .attr'y2'，'100%'； 渐变。选择所有“停止” .数据颜色 进来 .附加“停止” .style'stop-color'，函数d{return d；} .attr'offset'，函数d，i{ 返回100*i/colors.length-1+'%'； } svg.append'rect' .attr'x'，10 .attr'y'，10 .attr'width'，50 .attr'height'，150 .style'fill'、'urlgrad'；

---

你想要实现的东西的上下文是什么？为什么你需要d3？我正在使用六边形容器实现一个散点图，其中容器颜色指示每个点的频率，这就是为什么我需要条形图。所以它的用途是散点图的图例？它绝对必须由JavaScript生成吗？它不能是带有CSS渐变的纯HTML元素？纯CSS、canvas或SVG可以很好地满足您的需要。您知道如何使用d3js实现这一点吗？由于我正在动态构建数据，这不会有帮助。感谢您的回复，但javascript代码不起作用。ReferenceError:svgSelect未定义