D3.js d3中多个圆弧的径向渐变

我有以下弧图：

我想为每个弧添加一个渐变，从每个弧的外半径流向内半径

我猜我需要为每个弧创建一个单独的渐变

let radius = 100;

for(let i = 0; i < 5; i ++) {

  let grad = defs.append('radialGradient')
       .attr('id', 'mygrad' + i)
    .attr('gradientUnits', 'userSpaceOnUse')
          .attr('cx', '0')
    .attr('cy', '0')
    .attr('r', radius)

  grad.append('stop')
       .attr('offset', '0%')
    .attr('stop-color', 'white');

  grad.append('stop')
       .attr('offset', '100%')
    .attr('stop-color', 'blue');

  let arc = d3.arc()
    .outerRadius( radius )
    .innerRadius( radius - 50)
    .startAngle( degToRad(-90) )
    .endAngle( degToRad(90) );

  g.append('path')
    .attr('d', arc)
    .attr('fill', `url(#${'mygrad' + i })`)
    .attr('stroke', 'lightgrey');

  radius += 50;
}

---

您需要在用户空间坐标中工作，因为对象边界框不是一个好的正方形，您将得到一个扭曲的渐变。指定渐变（

r

）的

端点半径

指定相对于渐变的
端部半径的白色停止百分比（参数
r
）


let width=800；
设高度=800；
让svg=d3。选择（'svg'）
.attr（'width'，width）
.attr（'高度'），高度；
设defs=svg.append（'defs'）；
设g=svg.append（'g'）
.attr（'transform'，'translate（${width/2}，${height/2}）`）；
设半径=100；
for（设i=0；i<5；i++）{
设grad=defs.append（'radialGradient'）
.attr（'id'，'mygrad'+i）
.attr（'gradientUnits'，'userSpaceOnUse'）
.attr（'cx'，0）
.attr（'cy'，0）
.attr（'r'，半径）；
grad.append（'stop'）
.attr（'offset'，`${100*（radius-50）/radius}%`）
.attr（'stop-color'，'white'）；
grad.append（'stop'）
.attr（“偏移量”、“100%”）
.attr（'stop-color'，'blue'）；
设arc=d3.arc（）
.外部（半径）
.内半径（半径-50）
.startAngle（degToRad（-90））
.端角（degToRad（90））；
g、 追加（'路径'）
.attr（'d'，弧）
.attr（'fill'，'url（#${'mygrad'+i}）`）
.attr（“笔划”、“浅灰色”）；
半径+=50；
}
//助手
功能除雾器（度）{
返回度*（数学PI/180）；
}
您需要在用户空间坐标中工作，因为对象边界框不是一个好的正方形，您将得到一个扭曲的渐变。指定渐变（
r
）的
端点半径

指定相对于渐变的
端部半径的白色停止百分比（参数
r
）


let width=800；
设高度=800；
让svg=d3。选择（'svg'）
.attr（'width'，width）
.attr（'高度'），高度；
设defs=svg.append（'defs'）；
设g=svg.append（'g'）
.attr（'transform'，'translate（${width/2}，${height/2}）`）；
设半径=100；
for（设i=0；i<5；i++）{
设grad=defs.append（'radialGradient'）
.attr（'id'，'mygrad'+i）
.attr（'gradientUnits'，'userSpaceOnUse'）
.attr（'cx'，0）
.attr（'cy'，0）
.attr（'r'，半径）；
grad.append（'stop'）
.attr（'offset'，`${100*（radius-50）/radius}%`）
.attr（'stop-color'，'white'）；
grad.append（'stop'）
.attr（“偏移量”、“100%”）
.attr（'stop-color'，'blue'）；
设arc=d3.arc（）
.外部（半径）
.内半径（半径-50）
.startAngle（degToRad（-90））
.端角（degToRad（90））；
g、 追加（'路径'）
.attr（'d'，弧）
.attr（'fill'，'url（#${'mygrad'+i}）`）
.attr（“笔划”、“浅灰色”）；
半径+=50；
}
//助手
功能除雾器（度）{
返回度*（数学PI/180）；
}

SVG 2添加了一个属性。这使得为渐变定义内部起始半径成为可能。结合在其他定义中引用渐变定义的可能性，您的代码可以重写为


let width=800；
设高度=800；
让svg=d3。选择（'svg'）
.attr（'width'，width）
.attr（'高度'），高度；
设defs=svg.append（'defs'）；
设g=svg.append（'g'）
.attr（'transform'，'translate（${width/2}，${height/2}）`）；
设半径=100；
设gradcolors=defs.append（'radialGradient'）
.attr（'id'，'gradcolors'））
.attr（'gradientUnits'，'userSpaceOnUse'）
.attr（'cx'，'0'）
.attr（'cy'，'0'）
gradcolors.append（'stop'）
.attr（'offset'，'0%'））
.attr（'stop-color'，'white'）；
gradcolors.append（'stop'）
.attr（“偏移量”、“100%”）
.attr（'stop-color'，'blue'）；
for（设i=0；i<5；i++）{
设grad=defs.append（'radialGradient'）
.attr（'id'，'mygrad'+i）
.attr（'href'，'#gradcolors'））
.attr（'fr'，半径-50）
.attr（'r'，半径）
设arc=d3.arc（）
.外部（半径）
.内半径（半径-50）
.startAngle（-90*（数学PI/180））
.端角（90*（数学PI/180））；
g、 追加（'路径'）
.attr（'d'，弧）
.attr（'fill'，'url（#${'mygrad'+i}）`）
.attr（“笔划”、“浅灰色”）；
半径+=50；
}

SVG 2添加了一个属性。这使得为渐变定义内部起始半径成为可能。结合在其他定义中引用渐变定义的可能性，您的代码可以重写为


let width=800；
设高度=800；
让svg=d3。选择（'svg'）
.attr（'width'，width）
.attr（'高度'），高度；
设defs=svg.append（'defs'）；
设g=svg.append（'g'）
.attr（'transform'，'translate（${width/2}，${height/2}）`）；
设半径=100；
设gradcolors=defs.append（'radialGradient'）
.attr（'id'，'gradcolors'））
.attr（'gradientUnits'，'userSpaceOnUse'）
.attr（'cx'，'0'）
.attr（'cy'，'0'）
gradcolors.append（'stop'）
.attr（'offset'，'0%'））
.attr（'stop-color'，'white'）；
gradcolors.append（'stop'）
.attr（“偏移量”、“100%”）
.attr（'stop-color'，'blue'）；
for（设i=0；i<5；i++）{
设grad=defs.append（'radialGradient'）
.attr（'id'，'mygrad'+i）
.attr（'href'，'#gradcolors'））
.attr（'fr'，半径-50）
.attr（'r'，半径）
设arc=d3.arc（）
.外部（半径）
.内半径（半径-50）
.startAngle（-90*（数学PI/180））
.端角（90*（数学PI/180））；
g、 追加（'路径'）
.attr（'d'，弧）
.attr（'fill'，'url（#${'mygrad'+i}）`）
.attr（“笔划”、“浅灰色”）；
半径+=50；
}

您有5个渐变，但仅使用1个。将.attr（'fill'，
url（#${'mygrad'+**1**}）
）更改为.attr（'fill'，
url（#${'mygrad'+**i**}）
）行
let grad = defs.append('radialGradient')
       .attr('id', 'mygrad' + i)
    .attr('r', '80%')

  grad.append('stop')
       .attr('offset', '0%')
    .attr('stop-color', 'white');

grad.append('stop')
   .attr('offset', '100%')
  .attr('stop-color', 'blue');

  grad.append('stop')
    .attr('offset', `${100*(radius-50)/radius}%`)
    .attr('stop-color', 'white');