Add Circles At The Edges Of Wheelnav Items That Rotates Along With It

Here's a jsFiddle link: https://jsfiddle.net/zv3mb0wp/ var wheel = new wheelnav('divWheel'); wheel.cssMode = true; wheel.wheelRadius = wheel.wheelRadius * 0.9; wheel.titleRo

Solution 1:

You must create a custom slicePath for wheelnav.

var CircleEdgeSlice = function (helper, percent, custom) {

    var custom = new slicePathCustomization();
    custom.titleRadiusPercent = 0.7;
    helper.setBaseValue(percent, custom);

    slicePathString = [];

    slicePathString.push(helper.MoveToCenter());
    slicePathString.push(helper.LineTo(helper.startAngle+5, helper.sliceRadius));
    slicePathString.push(helper.ArcTo(helper.sliceRadius, helper.middleAngle-10, helper.sliceRadius));
    slicePathString.push(helper.ArcTo(30, helper.middleAngle+10, helper.sliceRadius));
    slicePathString.push(helper.ArcTo(helper.sliceRadius, helper.endAngle-5, helper.sliceRadius));
    slicePathString.push(helper.Close());

    return {
        slicePathString: slicePathString,
        linePathString: "",
        titlePosX: helper.titlePosX,
        titlePosY: helper.titlePosY
    };
};

Then use it in your initialization:

wheel.slicePathFunction = CircleEdgeSlice;

Here is a modified JSFiddle, it produces this: