使用 d3.js 中的比例用 3 种颜色填充垂直条

Question

在 D3 中，我想用 3 种不同的颜色填充一个垂直条。这如何实现？

该栏的“域”为 0 到 3。

红色从 0 到 1.5。

蓝色从 1.5 到 2。

从 2 到 3 的黄色。

我不知道如何做到这一点。看起来很简单，我会使用 3 个<rect>，每个都有一个下界的Y，和一个范围距离的height。

这似乎失败了，因为对于最后一个栏，我的比例尺返回高度 0。我使用的比例尺有误吗？

http://jsfiddle.net/7V8vZ/

Answer 1

好的，这是我的解决方案：http://jsfiddle.net/7V8vZ/1/

基本上我无法使用 (min,max) 数据。我不得不使用一个奇怪的（最小，高度）。这让我弄清楚矩形的位置，然后确定它的高度。也许 d3 给出了一个为此目的的尺度？

我假设有很多 d3.js 我没有利用。所以如果你有更好的方法，请评论或回答！