Be dynamically parameterized

GoJS
1

https://gojs.net/latest/extensions/Figures.js
go.Shape.defineFigureGenerator(“CircleLine”, function(shape, w, h) {
var rad = w/2;
var geo = new go.Geometry()
.add(new go.PathFigure(w, w / 2, false) // clockwise
.add(new go.PathSegment(go.PathSegment.Arc, 0, 360, rad, rad, rad, rad).close()));
geo.spot1 = GeneratorEllipseSpot1;
geo.spot2 = GeneratorEllipseSpot2;
geo.defaultStretch = go.GraphObject.Uniform;
return geo;
});
In the Figures.js ,How to dynamically change the startAngle and sweepAngle of CircleLine?

2

A circle of course has no startAngle or sweepAngle, so I assume you are asking about how to create “pie” shapes – sectors of a circular area.

The easy answer is to use the “Pie” figure that is also defined in the extensions/Figure.js file. Set or bind the Shape.parameter1 and Shape.parameter2 properties.

The Geometry, PathFigure, and PathSegment classes do not support data binding. Instead you have to regenerate the geometry, as that “Pie” figure does. Or you can do what the Pie Charts sample does, in Page Not Found -- Northwoods Software generate the Geometry in a conversion function. See the makeGeo function in that sample.

3 
function makeGeo(data) {
var angle = data.sweep-data.start;
return new go.Geometry()
      .add(new go.PathFigure(data.radius + data.radius*Math.cos(angle*Math.PI/180), data.radius + data.radius*Math.sin(angle*Math.PI/180))  
           .add(new go.PathSegment(go.PathSegment.Arc,
                                   data.start, data.sweep,  
                                   data.radius, data.radius,  
                                   data.radius, data.radius)  
                ));

}

This is not an arc.

4 
    function makeGeo(data) {
      return new go.Geometry()
        .add(new go.PathFigure(data.radius + data.radius * Math.cos(data.start * Math.PI / 180),
                               data.radius + data.radius * Math.sin(data.start * Math.PI / 180),
                               false)
          .add(new go.PathSegment(go.PathSegment.Arc,
                                  data.start, data.sweep,
                                  data.radius, data.radius,
                                  data.radius, data.radius)
        ));
      }