markup
Either an XML string or JSON markup specifying an array of JSON elements. Used as a template to build DOM Elements on the fly when the associated cellView is rendered.
A valid XML string that contains either a single tagName
or XML that can be parsed with DOMParser
.
markup: 'rect'
markup: '<rect class="rectangle"/>'
markup: '<rect><g><circle/><circle/></g>'
JSON markup is defined recursively as an array of JSONElement
, where JSONElement
is a plain object with the following properties:
tagName
(string) (required) The type of element to be created.selector
(string) A selector for targeting the element within the attr
cell attribute.namespaceURI
(string) The namespace URI of the element. It defaults to SVG namespace "http://www.w3.org/2000/svg"
.attributes
(object with attributes name-value pairs) Attributes of the element.style
(object with CSS property-value pairs) The style
attribute of the element.className
(string) The class
attribute of the element.children
(JSONMarkup) The children of the element.// single DOM element
markup: [{ tagName: 'rect' }]
// multiple DOM elements
markup: [{
tagName: 'rect',
selector: 'body'
}, {
tagName: 'text',
selector: 'label',
attributes: {
'stroke': 'none'
}
}]
// nested DOM elements
markup: [{
tagName: 'g',
children: [{
tagName: 'circle',
selector: 'circle1'
}, {
tagName: 'circle',
selector: 'circle2'
}]
}]