使用D3 JS向甜甜圈图背景添加线条

Question

我必须使用d3js进行以下图表。我无法添加线性背景线条纹。如何达到此要求？

这是我到目前为止的进步

这是我的代码

HTML：

<svg id="chart2" height="280" width="280"></svg>

JS

    function progressChart() {
  var percent = .75; // 0.0 to 1.0
var text = (percent * 100) + "%";
var width = 180;
var height = 186;
var thickness = 29;
var duration = 1000;
var foregroundColor = "#0076CE";
var backgroundColor = "#C0C0C0";
var radius = Math.min(width, height) / 2;
var color = d3.scaleOrdinal([foregroundColor, backgroundColor]);
var svg = d3.select("#chart1")
.attr('class', 'pie')
.attr('width', width)
.attr('height', height);
var g = svg.append('g')
.attr('transform', 'translate(' + (width/2) + ',' + (height/2) + ')');
var arc = d3.arc()
.innerRadius(radius - thickness)
.outerRadius(radius);
var pie = d3.pie()
.sort(null);
var path = g.selectAll('path')
.data(pie([0, 1]))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
  return color(i);
})
.each(function(d) { this._current = d; });
path.data(pie([percent, 1-percent])).transition()
  .duration(duration)
  .attrTween('d', function(d) {
  var interpolate = d3.interpolate(this._current, d);
  this._current = interpolate(0);
  return function(t) {
    return arc(interpolate(t));
  }
});
g.append('text')
  .attr('text-anchor', 'middle')
  .attr('dy', '.35em')
  .text(text)
.style('font-size', '34px')
}

预先感谢