coarse(dot`digraph { a -> b; }`)
/**
* Convert an svg with rough
* @kind function
* @param {Node} input An svg node to render with rough
* @param {Object} [options={}] Global configuration options for rough
* @returns {Node} The converted svg as a DOM Node
*/
coarse = (input, options = {}) => {
// Parse svg and initialize rough
const container = document.createElement('template');
container.appendChild(input.cloneNode(true));
const svg = container.querySelector('svg');
const rc = rough.svg(svg, { options });
// Get all descendants of the svg that should be processed
const children = svg.querySelectorAll(
'circle, rect, ellipse, line, polygon, polyline, path'
);
// Loop through all child elements
for (let i = 0; i < children.length; i += 1) {
const original = children[i];
const params = [];
let shapeType;
switch (original.tagName) {
case 'circle':
params.push(
...getNum(original, ['cx', 'cy']),
...getDiam(original, ['r'])
);
shapeType = 'circle';
break;
case 'rect':
params.push(...getNum(original, ['x', 'y', 'width', 'height']));
shapeType = 'rectangle';
break;
case 'ellipse':
params.push(
...getNum(original, ['cx', 'cy']),
...getDiam(original, ['rx', 'ry'])
);
shapeType = 'ellipse';
break;
case 'line':
params.push(...getNum(original, ['x1', 'y1', 'x2', 'y2']));
shapeType = 'line';
break;
case 'polygon':
params.push(getCoords(original, 'points'));
shapeType = 'polygon';
break;
case 'polyline':
params.push(getCoords(original, 'points'));
shapeType = 'linearPath';
break;
case 'path':
params.push(original.getAttribute('d'));
shapeType = 'path';
break;
}
// Generate the new shape
const replacement = rc[shapeType](...params, getSettings(original));
// Get all attributes from the original element that should be copied over
const attributes = getAttributes(original).filter(
attribute => !blacklist.includes(attribute.name)
);
// Copy all valid attributes to the replacement
attributes.forEach(({ name, value }) => {
replacement.setAttribute(name, value);
});
original.replaceWith(replacement);
}
return svg.parentNode.removeChild(svg);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
