D3颜色渐变不围绕区域中心形成数学圆

Question

我正在尝试使用颜色渐变来绘制径向区域图以反映这一点。然而，渐变似乎并不希望完美地与圆形坐在正确的一侧（见下图）。

我已经尝试约束svg的宽度和高度，使它们相等，但没有效果。每次刷新（随机数据），渐变的中心环将移动并扭曲成不同的形状，但从不躺在它应该的平均线上。

我确保svg是方形的

 var width = window.innerWidth ,   height = window.innerHeight;

  width = height =   d3.min([width,height])

  var data = d3.range(0,100).map(d=>Math.random())

给定渐变以下属性

 var linearGradient = defs.append("radialGradient")
.attr("id", "rad-gradient")
.attr("cx", "50%")    //The x-center of the gradient, same as a typical SVG circle
.attr("cy", "50%")    //The y-center of the gradient
.style("r", "50%");

和我的区域以数学方式

var area = d3.area()
 .x1(function(d,i) { return width/2+Math.cos(i\*angle)*(h(d)) })     .x0(function(d,i) { return > width/2+Math.cos(i\*angle)*(h(mean)) })    .y0(function(d,i) {> return height/2+Math.sin(i\*angle)*(h(mean)) })    .y1(function(d,i) { return height/2+Math.sin(i\*angle)*(h(d)) })

并将创建的渐变附加到svg路径

svg.append("path")
    .data([data])
    .attr("class", "area")
    .attr("d", area)
    .style("fill", "url(#rad-gradient)")

Answer 1

解决方案在于创建一个圆并用正确的渐变填充它。这可确保径向渐变始终以原点为中心。

然后，您可以使用clipPath仅从圆圈中提取您要使用的路径。在稍微调整以对齐渐变半径之后，我们获得了期望的效果。

// previous definition for area path appended as a clip path
clip = defs.append("clipPath")
  .attr('id','clip')
  .append("path")
  .data([data])
  .attr("class", "area")
  .attr("d", area)

//extracting this path from a circle with the desired gradient
svg.append("circle")

  .attr("cx", width/2)
  .attr("cy", height/2)
        .attr("r", rmax)
        .attr("clip-path","url(#clip)")
      .style("fill", "url(#linear-gradient)")