javascript - 为圆的每个角度制作渐变边框

Question

var arraySpin = ['#15b98e','#ba3ee9','#f7c951','#f83757','#15b98e','#ba3ee9','#f7c951','#f83757'];
var w = 200, h = 200, r = 100;
var svg = d3.select('#circle-split')
  .append('svg')
  .data([arraySpin])
  .attr('width', w)
  .attr('height', h);

// create group for element
var container = svg.append('g').attr('transform', 'translate(' + (w / 2) + ',' + (h / 2) + ')');
var vis = container.append('g');
var widthWin = 65, heightWin = 65;

var pie = d3.layout.pie().sort(null).value(function (d) { return 1; });

// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);

// select paths, use arc generator to draw
var arcColor = vis.selectAll('g.color')
  .data(pie)
  .enter()
  .append('g')
  .attr('class', 'color');
arcColor.append('path')
  .attr('fill', function (d, i) { return arraySpin[i]; })
  .attr('d', function (d) { return arc(d); });

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="circle-split"></div>

我使用 d3.v3.min.js 制作了一个像披萨一样的圆圈，但是如何为每个角度制作边框渐变？我需要它来做幸运轮。