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

Question

我正在尝试绘制一个带有颜色渐变的径向区域图来反映这一点。然而，渐变似乎并不想与圆完美地对齐/位于正确的一侧（见下图）。

我试过限制 svg 的宽度和高度，使它们相等，但是没有 avail.Every 刷新（使用随机数据），渐变的中心环将移动并扭曲成不同的形状，但永远不要位于它应该位于的平均线上。

我已经确保 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)")

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

D3 colour gradient not forming mathematical circle around centre of area

javascript

css

svg

radial-gradients

d3.js