The settings now will have a new attribute CUSTOM_SYMBOL_FN that will receive the same parameters that the internal getSymbol receives and in addition the context element.
Example creating a custom svg element
function custom_symbol(name, x, y, context) {
console.log(name, x, y);
const symbol = document.createElementNS(context.root.namespaceURI, 'circle')
symbol.setAttribute('cx', x - astrology.SIGNS_STROKE)
symbol.setAttribute('cy', y - astrology.SIGNS_STROKE)
symbol.setAttribute('width', '20px')
symbol.setAttribute('height', '20px')
symbol.setAttribute('r', '10')
symbol.setAttribute('fill', 'blue')
return symbol;
}
window.onload = function () {
var chart = new astrology.Chart('paper', 600, 600, {CUSTOM_SYMBOL_FN: custom_symbol});
chart.radix( data).aspects();
};
Example with image from a external source
function custom_symbol(name, x, y, context) {
console.log(name, x, y);
if(name == astrology.SYMBOL_MARS) return null; // null or undefined will fallback to the defaul implemetation
const symbol = document.createElementNS(context.root.namespaceURI, 'image')
symbol.setAttribute('href', 'http://localhost:8080/assets/Sun.svg')
symbol.setAttribute('x', x - 10)
symbol.setAttribute('y', y - 10)
symbol.setAttribute('width', '20px')
symbol.setAttribute('height', '20px')
return symbol;
}
window.onload = function () {
var chart = new astrology.Chart('paper', 600, 600, {CUSTOM_SYMBOL_FN: custom_symbol});
chart.radix(data).aspects();
};
The settings now will have a new attribute
CUSTOM_SYMBOL_FN
that will receive the same parameters that the internal getSymbol receives and in addition the context element.Example creating a custom svg element
Example with image from a external source
closes #5