Question

I m trying to create doughnut visualization using d3 with fadeout/gradient effect for each arc like this:

我试图添加过滤器: drop(0 0 10px彩色)但并没有给我带来这种影响,而且它也扩散到双方。

So I moved to use two pies

Outer solid color
Inner with (hopefully) the fade out effect

我在梯度中知道,我可以说得坚固,但因为我没有一条成功的明确道路,我分成两点。

I ve试图使用线性梯度和安度;在第二皮条上使用rad梯度,这似乎是一个朝向方向迈出的一步,但梯度效应变化是不同的:

就简而言之,由于我不相信这是解决我问题的办法,目前我只为一种颜色建立了梯度过滤器。

I ve added a snippet to help the helpers :)

const colors = [ red , green , purple , blue , orange , teal ]
const data = [10,12,33,112,22,4];
const pie = d3.pie().padAngle(0.03);
const arcs = pie(data);

const svg = d3.select( body )
  .append( svg );
 
const svgDefs = svg.append( defs );

const mainGradient = svgDefs.append( radialGradient )
                .attr( id ,  mainGradient );

            mainGradient.append( stop )
                .attr( stop-color ,  red )
                .attr( offset ,  10% );

            mainGradient.append( stop )
                .attr( stop-color ,  pink )
                .attr( offset ,  90% );



d3.select( body )
  .style( position ,  relative )
  .append( svg )
  .style( position ,  absolute )
  .style( z-index , 10)
  .attr( width , 600)
  .attr( height , 600)
  .append("g")
  .attr("transform", "translate(100,100)")
  .selectAll( path )
  .data(arcs)
  .enter()
  .append( path )
  .attr( d , (a,b,c) => d3.arc()({...a, innerRadius: 96, outerRadius: 100}))
  .style( fill , (d, index) => colors[index])

 svg.style( position ,  absolute )
    .attr( width , 600)
    .attr( height , 600)
  .append("g")
    .attr("transform", "translate(100,100)")
    .selectAll( path )
    .data(arcs)
    .enter()
    .append( path )
      .transition()
      .attr( d , (a,b,c) => d3.arc()({...a, innerRadius: 0, outerRadius: 96}))
      .style( fill ,  url(#mainGradient) )

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.14.2/d3.min.js"></script>
<body>
</body>
</html>

Answer 1

我不熟悉D3图书馆。然而,我可以回答一位原住的SVG问题,希望你能够利用这些原则创造你们在D3中所需要的东西。

北极梯度是正确的解决办法,但你很可能需要为nut子的每个斜体确定不同的梯度。您还需要指出每个梯度的中心点是你的nut子。 (如果你没有指明梯度的中心点,则中心将位于其适用道路的填充区,在这种情况下,这不是你想要的。)

此外,你们还需要利用两条道路,创造每一条通道:

One path with a stroke to create the bright edge of the slice. We can’t fill this path, though, because the fill would only extend to the area inside a direct line between the two endpoints of the path.

A second path with a gradient fill, which follows the same arc as the first path, but then extends to the centre of the doughnut and back to the start of the path (making a sector or “pizza slice”).

这与你在座标上所说的为外向和梯度填满第二胎的想法类似。

svg { height: 180px; }

<svg viewBox="-6 -6 12 12"> <defs> <radialGradient gradientUnits="userSpaceOnUse" cx="0" cy="0" r="5" id="gradient-0"> <stop offset="0.6" style="stop-color: #ff634700;"/> <stop offset="0.9" style="stop-color: #ff63472f;"/> </radialGradient> <radialGradient gradientUnits="userSpaceOnUse" cx="0" cy="0" r="5" id="gradient-1"> <stop offset="0.6" style="stop-color: #1c9cd900;"/> <stop offset="0.9" style="stop-color: #1c9cd92f;"/> </radialGradient> </defs> <path stroke="#ff6347" fill="none" d="M 0 -5 A 5 5 0 0 1 5 0"/> <path stroke-width="0" fill="url( #gradient-0 )" d="M 0 -5 A 5 5 0 0 1 5 0 L 0 0 Z"/> <path stroke="#1c9cd9" fill="none" d="M 0 5 A 5 5 0 0 1 -5 0"/> <path stroke-width="0" fill="url( #gradient-1 )" d="M 0 5 A 5 5 0 0 1 -5 0 L 0 0 Z"/> </svg>

友情链接