How to add spacing between items in wheelnav.js

Question

I got a navwheel generated from https://pmg.softwaretailoring.net/ but after going through their documentation I can't figure out how to add spcaing between the items in the wheel. They're cluttered together. Is there any function on the wheelnav object instantiated that I don't know of? I tried to go through their .js files to find it manually, but can't find anything.

Answer 1

You can use the stroke-width property with your background color to achieve spacing.

When cssMode is true use the following CSS.

[id|=wheelnav-wheelDiv-slice] {
    fill: white;
    stroke: *background-color*;
    stroke-width: 10px;
    cursor: pointer;
}

More info here: https://wheelnavjs.softwaretailoring.net/documentation/css3.html

Without cssMode use the following JavaScript.

var wheel = new wheelnav("wheelDiv");
wheel.slicePathAttr = { stroke: "*background-color*", "stroke-width": 10, cursor: 'pointer' };
wheel.sliceHoverAttr = { stroke: "*background-color*", "stroke-width": 10, cursor: 'pointer' };
wheel.sliceSelectedAttr = { stroke: "*background-color*", "stroke-width": 10, cursor: 'default' };
wheel.createWheel(["First", "Second", "Third", "Fourth"]);

Alternatively, you can create your own slicePath via customization.

More info here: https://wheelnavjs.softwaretailoring.net/documentation/slicePath.html#tutorial