D3 Examples - RegularPolys

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>
  <script>
    var width = 960;
    var height = 500;
    var lineLength = 150;
    var legendWidth = 360;
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    
    var poly = undefined;
    var angle = undefined;
    var angleRad = undefined;
    var angleOut = undefined;
    var angleOutRad = undefined;
    
    function drawArcs() {
      function getD(inRad, outRadOffset, startAngle, endAngle) {
        return d3.arc()
        .innerRadius(inRad)
        .outerRadius(inRad + outRadOffset)
        .startAngle(startAngle)
        .endAngle(endAngle)();
      }
      poly
        .append('path')
        .attr('d', 
          getD(
                lineLength * 0.2, 1, 
                Math.PI / 2, Math.PI / 2 - angleRad
            )
         );
      poly
        .append('path')
        .attr('d', 
          getD(
                lineLength * 0.18, 1, 
                Math.PI + Math.PI / 2, 
                Math.PI + Math.PI / 2 + angleOutRad
            )
         )
        .attr('transform', `translate(${lineLength}, 0)`)
      poly
        .append('path')
        .attr('d', 
          getD(
                lineLength * 0.18 + 2, 1, 
                Math.PI + Math.PI / 2, 
                Math.PI + Math.PI / 2 + angleOutRad
            )
         )
        .attr('transform', `translate(${lineLength}, 0)`)
      
      var arcOut2AngleStart = 3 * Math.PI / 2;
      poly
        .append('path')
        .attr('d', 
          getD(
                lineLength * 0.08, 1, 
                        arcOut2AngleStart + angleOutRad, 
                arcOut2AngleStart - angleOutRad
            )
         )
        .attr('transform', 
          `rotate(${-angle}), translate(${lineLength}, 0)`
        )
      poly
        .append('path')
        .attr('d', 
          getD(
                lineLength * 0.08 + 2, 1, 
                        arcOut2AngleStart + angleOutRad, 
                arcOut2AngleStart - angleOutRad
            )
         )
        .attr('transform', 
          `rotate(${-angle}), translate(${lineLength}, 0)`
        )
      poly
        .append('path')
        .attr('d', 
          getD(
                lineLength * 0.08 + 4, 1, 
                        arcOut2AngleStart + angleOutRad, 
                arcOut2AngleStart - angleOutRad
            )
         )
        .attr('transform', 
          `rotate(${-angle}), translate(${lineLength}, 0)`
        )
    }
    
    function drawLabels() {
      var f = d3.format('.1f');
      poly
        .append('text')
        .text(f(angle))
        .attr('y', -lineLength * 0.22 * Math.sin(angleRad/2))
        .attr('x', lineLength * 0.22 * Math.cos(angleRad/2))
        .attr('text-anchor', 'start')
        .style('font-size', 10)
        .style('font-family', 'monospace')
      poly.append("text")
      .text(f(angleOut) + "°")
      .attr("y", -lineLength * 0.22 * Math.sin(angleOutRad/2))
      .attr("x", lineLength - lineLength * 0.22 * Math.cos(angleOutRad/2))
      .attr('text-anchor', "end")
      .style("font-size", 10)
      .style("font-family", "monospace")
      poly
        .append('text')
        .text(f(angleOut * 2))
        .attr('y', -lineLength * 0.77 * Math.sin(angleRad))
        .attr('x', lineLength * (0.77 * Math.cos(angleRad)))
        .attr('text-anchor', 'middle')
        .style('font-size', 10)
        .style('font-family', 'monospace')
    }
    
    function drawPoly(count) {
      if(poly) {
        poly.remove();
      }
      poly = svg.append('g');
      angle = 360 / count;
      angleRad = Math.PI * angle / 180;
      angleOut = (180 - angle) / 2;
      angleOutRad = Math.PI * angleOut / 180;
      
      for(var i = 0; i < count; i++) {
        poly
          .append('line')
          .attr('stroke', '#ddd')
          .attr('x1', 0)
          .attr('y1', 0)
          .attr('x2', lineLength)
          .attr('y2', 0)
            .attr('transform', `rotate(${angle * i})`)
​
        poly
            .append('line')
            .attr('stroke', 'black')
            .attr('x1', lineLength)
            .attr('y1', 0)
            .attr('x2', Math.cos(angleRad) * lineLength)
            .attr('y2', -Math.sin(angleRad) * lineLength)
            .attr('transform', `rotate(${angle * i})`)
      }
      
      drawArcs();
      drawLabels();
      
      poly
        .attr(
            'transform', 
            `translate(${(width - legendWidth)/2},${height/2})`
        )
    }
    
    drawPoly(10)
    
    d3.csv('polyNames.csv', function(data){
      var nameG = svg.append('g')
      var labels = nameG
        .selectAll('g')
        .data(data)
        .enter()
        .append('text')
        .text(function(d){
          return d.name
        })
        .attr('transform', (d,i)=>{
          return `translate(0, ${i * 13})`
        })
        .style('font-size', 10)
        .style('font-family', 'monospace')
        .style('cursor', 'pointer')
        .on('click', function(d,i){
          drawPoly(i+3)
          labels.style('fill', 'black')
          d3.select(this).style('fill', 'red')
        })
        
      labels.filter(function(d,i){
        if(i===0) {
          d3.select(this).on('click').call(this, d,i);
        }
      })
      
      nameG
        .attr(
            'transform',
            `translate(
                        ${width - legendWidth},
                        ${(height - data.length * 13)/2}
                    )`
        )
      
      
    });
​
  </script>
</body>
​
    