D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  
  <svg id="svg">
  <!-- angle segment -->
    <path id="oeil" />
    
    <!-- highlighted angle's arc -->
    <path id="oeil2" class="arc" />
  </svg>
  <script>
    var height = 1000;
    var width = 1860;
​
    var svg = d3.select("svg"),
      width = +svg.attr("width"),
        height = +svg.attr("height"),
        g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); 
​
    //Données générales
    var oeil = svg.select("oeil");
    var oeil2 = svg.select("oeil2");
    
    var arc = d3.arc()
    .innerRadius(150)
    .outerRadius(120)
    .startAngle(0)
    .endAngle(Math.pi/4);
    
    arc.centroid(width/2, height/2);
​
        svg.append("path")
    .attr("class", "arc")
    .style("fill", "#ddd")
    .attr("d", arc);
    
​
  </script>
</body>
​
    