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

Question

我正在尝试基于角度位置而不是半径来实现梯度阈值处理。我包括两个例子。

示例1： http://jsfiddle.net/TennisAiP/23x7bdq8/

  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; });

第一个示例基于http://bl.ocks.org/mbostock/3970883，但是将阈值更改为x轴，以演示我希望实现的第二个示例，其中渐变当前基于半径阈值更改。

示例2： http://jsfiddle.net/TennisAiP/z79v4p9w/

   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'; });

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