D3.js基于角度而非半径的阈值编码梯度

我试图实现基于角度位置而不是半径的梯度阈值。我举了两个例子

示例1:

第一个示例基于但将阈值更改为x轴，以演示我希望为第二个示例实现的目标，其中当前基于半径阈值更改梯度

示例2:

---

想象一个径向图，如上面使用d3.svg.line.radial（）的径向图，其中直线可能会穿过色轮的所有颜色，而与半径无关。

请参见Thank Lars。我已经看到了，但我希望有另一种方式。

  svg.append("linearGradient")
      .attr("id", "wlgradient")
      .attr("gradientUnits", "userSpaceOnUse")
      .attr("x1", x(1)).attr("y1", 0)
      .attr("x2", x(20)).attr("y2", 0)
    .selectAll("stop")
      .data([
        {offset: "0%", color: "red"},
        {offset: "5%", color: "red"},
        {offset: "5%", color: "limegreen"},
        {offset: "10%", color: "limegreen"},
        {offset: "10%", color: "red"},
        {offset: "15%", color: "red"},
        {offset: "15%", color: "limegreen"},
        {offset: "20%", color: "limegreen"},
        {offset: "20%", color: "red"},
        {offset: "30%", color: "red"},
        {offset: "30%", color: "limegreen"},
        {offset: "55%", color: "limegreen"},
        {offset: "55%", color: "red"},
        {offset: "70%", color: "red"},
        {offset: "70%", color: "limegreen"},
        {offset: "85%", color: "limegreen"},
        {offset: "85%", color: "red"},
        {offset: "100%", color: "red"}
      ])
    .enter().append("stop")
      .attr("offset", function(d) { return d.offset; })
      .attr("stop-color", function(d) { return d.color; });

   var grads = svg.append("defs").selectAll("radialGradient").data(data)
       .enter().append("radialGradient")
       .attr("gradientUnits", "userSpaceOnUse")
       .attr("cx", 0)
       .attr("cy", 0)
       .attr("r", "100%")
       .attr("id", function(d, i) { return "grad" + i; });

   grads.append("stop").attr("offset", "0%").style("stop-color", function(d, i) { return 'red'; });
   grads.append("stop").attr("offset", "15%").style("stop-color", function(d, i) { return 'red'; });
   grads.append("stop").attr("offset", "15%").style("stop-color", function(d, i) { return 'limegreen'; });
   grads.append("stop").attr("offset", "18%").style("stop-color", function(d, i) { return 'limegreen'; });
   grads.append("stop").attr("offset", "18%").style("stop-color", function(d, i) { return 'red'; });
   grads.append("stop").attr("offset", "22%").style("stop-color", function(d, i) { return 'red'; });
   grads.append("stop").attr("offset", "22%").style("stop-color", function(d, i) { return 'limegreen'; });