Comment créer un objet Ellipse basé sur un split SVG en huit parties basé sur Javascript D3?

-1

J'essaie de créer en javascript un dessin basé sur la bibliothèque D3. J'ai vu de nombreux exemples d'ellipse mais pas divisés en 8 parties. J'ai trouvé celui-ci mais pour moi c'est difficile de trouver un nouveau.Comment créer un objet Ellipse basé sur un split SVG en huit parties basé sur Javascript D3?

enter code here

http://jsfiddle.net/KQ3eH/2/

L'idée est basée dans un datatable identifier ou mettre une couleur différente dans la section qui a un statut échec autour du perimiter.

Exemple IMG:

Source

2016-11-24 Douglas Fernandes

Vous pouvez dessiner les arcs en utilisant la norme d3.arc puis échelle le récipient pour le faire apparaître comme une ellipse:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    
 
    var svg = d3.select('body') 
 
     .append('svg') 
 
     .attr('width', 500) 
 
     .attr('height', 300) 
 
     .append('g') 
 
     .attr('transform', 'translate(250,150)scale(1.6,1)'); 
 
     
 
    var step = (2 * Math.PI)/8, 
 
     data = d3.range(0, 2 * Math.PI , step).map(function(d){ 
 
      return { 
 
      s: d, 
 
      e: d + step, 
 
      f: Math.random() > 0.5 ? true : false 
 
      }; 
 
     }); 
 
    
 
    svg.selectAll("path") 
 
     .data(data) 
 
     .enter() 
 
     .append("path") 
 
     .attr("d", function(d){ 
 
     return d3.arc()({ 
 
      innerRadius: 0, 
 
      outerRadius: 150, 
 
      startAngle: d.s, 
 
      endAngle: d.e 
 
     }); 
 
     }) 
 
     .style("fill", function(d,i){ 
 
     return d.f ? "red" : "gray"; 
 
     }) 
 
     .style("stroke", "black"); 
 
    
 
    </script> 
 
</body> 
 

 
</html>

Source

2016-11-24 18:33:25 Mark

Comment créer un objet Ellipse basé sur un split SVG en huit parties basé sur Javascript D3?

Répondre

Questions connexes