D3 Examples - marker

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>
    // path based version version
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
​
    svg.append("path")
            .attr('d', generatePath(200, 200, 45, 63, 80))
            .attr('fill', 'red')
            //.attr('transform', `rotate(180 200 200)`);
    
    
    
    // area based version version
    let area = d3.area()
                    .x((d) => { return d.x; })
                    .y1((d) => { return d.y; })
                    .y0((d) => { return 0; })
                    .curve(d3.curveBasis);
    
     // area based version version
    let area2 = d3.area()
                    .x((d) => { return d.x; })
                    .y1((d) => { return d.y; })
                    .y0((d) => { return 0; })
                    .curve(d3.curveBasis);
    
    let dx = 43;
    let dy = 42;
    let s = 80;
    
    let x = 200;
    let y = 81;
    
    let points = [{x: x, y: y}, {x: x + dx, y: y - dy}, {x: x, y: y - s}, {x: x - dx, y: y -dy}, {x: x, y: y} ];
    
    svg.append('path')
        //.datum(points)
        .attr('d', area(generateD3AreaPoints(35)))
        .style('fill', '#35a993')
        .attr('transform', `translate(180 200 )`);
    
    
    svg.append('path')
        .attr('d', area2(points))
        .style('fill', '#35a993')
        .attr('transform', `translate(300 200 )`);
    
    
    function generateD3AreaPoints (ySize) {
            //Reference marker : 51, 46, 25 - that's a good shape found by Mohamed
            //which gives a 102px marker
​
            var refXExtend = 51;
            var refYExtend = 46;
            var refYTail = 25;
            var refYSize = 102;
​
            var xExtend = refXExtend * ySize / refYSize;
            var yExtend = refYExtend * ySize / refYSize;
            var yTail = refYTail * ySize / refYSize;
            return generateAreaPoints(xExtend, yExtend, yTail);
        };
    
    function generateAreaPoints(xExtend, yExtend, yTail) {
            var x = 0;
            var y = 0;
            var yCenter = y - yTail - yExtend;
            var yTop = y - yTail - 2 * yExtend;
​
            var points = [{ x: x, y: y }, { x: x + xExtend, y: yCenter }, { x: x, y: yTop }, { x: x - xExtend, y: yCenter }, { x: x, y: y }];
            return points;
        }
    
    
    
    
            //.attr('stroke', 'black')
    
   function generatePath(cx, cy, radius, theta, dy) {
     theta = Math.PI * theta / 180;
     var xStart = cx + radius * Math.sin(theta); 
     var yStart = cy + radius * Math.cos(theta); 
     
     var xStop = cx - radius * Math.sin(theta); 
     var yStop = yStart; 
    
     var path = `M ${xStart} ${yStart} A ${radius} ${radius}, 0,1,0, ${xStop} ${yStop} L ${cx} ${cy + dy}`
     
     console.log(path)
     return path;
   }
​
  </script>
</body>
​
    