Cómo dibujar un arco de degradado usando d3.js?

Empecé a usar d3.js. Tengo el siguiente requisito

Requisito:

enter image description here

¿Qué he intentado?

violín

¿Pregunta?

Cómo lograr el degradado igual que la image de arriba.

Cualquier sugerencia o idea será agradecida.

Nota

Acabo de comenzar d3.js

Editar – estructura de datos modificada y enlace violín para representar el fragment sin completar al principio.

Usaría la function circular en d3 para crear un gráfico circular. La image de arriba es básicamente un pastel con dos styles de degradado diferentes aplicados a los trozos de tarta. Un degradado lineal rojo y un degradado radial blanco / negro.

Creé un violín vinculado a continuación para mostrar un ejemplo. La key aquí es que necesita estructurar sus datos para include también el porcentaje que no debería tener el gradiente rojo aplicado. Usando el ejemplo anterior, tenemos tres trozos con rojo y el rest como no rellenos. Imagine los datos establecidos así:

  var data = [{ percent: 10, pie: 0 }, { percent: 13, pie: 1 }, { percent: 13, pie: 1 }, { percent: 6, pie: 1 }, { percent: 56, pie: 0 }]; 

Entonces tenemos el porcentaje y también marcamos qué trozos deben ser rojos y qué porción debe ser la sección sin relleno usando el atributo pie.

Puede usar cualquier set de datos que desee, pero solo estoy usando esto como ejemplo.

Entonces, lo siguiente es crear tu elemento SVG:

  var width = 400; var height = 400; var radius = Math.min(width, height) / 2; var arc = d3.svg.arc() .outerRadius(radius - 10) .innerRadius(((radius - 10) / 5) * 4); var pie = d3.layout.pie() .sort(null) .value(function (d) { return d.percent }); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); 

y después de esto crearemos los dos degradados para diseñar los trozos de tarta. Entonces, el primero es el gradiente rojo lineal:

 // append a defs tag to SVG, This holds all our gradients and can be used //by any element within the SVG we append it to var defs = svg.append("svg:defs") //next we append a linear gradient var networking_gradient = defs.append("svg:linearGradient") .attr("id", "gradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "0%") .attr("y2", "100%") .attr("spreadMethod", "pad"); //first dark networking color networking_gradient.append("svg:stop") .attr("offset", "0%") .attr("stop-color", "rgb(221,48,2)") .attr("stop-opacity", 1); //second light networking color networking_gradient.append("svg:stop") .attr("offset", "100%") .attr("stop-color", "rgb(247, 78, 1)") .attr("stop-opacity", 1); 

Luego agregamos el degradado radial para la parte sin rellenar. Este es un pequeño truco porque necesitamos mover el degradado con una transformación para get el centro radial correcto. Si lo traduces a la mitad del ancho y alto, creo que debería funcionar.

 var radial_gradient = defs.append("radialGradient") .attr("gradientUnits", "userSpaceOnUse") .attr("cx", '50%') .attr("cy", '50%') .attr("r", "75%") .attr("fx", '50%') .attr("fy", '50%') .attr('gradientTransform', "translate(-200,-200)") .attr("id", 'gradient2'); radial_gradient.append("stop").attr("offset", "0%").style("stop-color", "black"); radial_gradient.append("stop").attr("offset", "55%").style("stop-color", "white"); radial_gradient.append("stop").attr("offset", "95%").style("stop-color", "black"); 

Una vez que hemos configurado los degradados, podemos agregar el pastel:

  var g = svg.selectAll(".arc") .data(pie(data)) .enter().append("g") .attr("class", "arc"); // we create a function to append the different chucks of the pie. // we check the pie attribute from the data and apply the correct gradient. g.append("path") .attr("d", arc) .style("fill", function (d) { if (d.data.pie === 1) { console.log('true' + d.data.pie); return "url(#gradient)" } else { console.log('false' + d.data.pie); return "url(#gradient2)" } }) 

JSFiddle: http://jsfiddle.net/staceyburnsy/afo292ty/2/