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.

XML String

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>'

Note that defining Cell markup with XML strings is slower than defining it with JSON arrays, precisely because of the need for parsing. We strongly recommend you to use the JSON markup for your Cell definitions.

JSON Markup

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 unique selector for targeting the element within the attr cell attribute.
• groupSelector (string | string[]) A selector for targeting multiple elements within the attr cell attribute. The group selector name must not be the same as an existing selector name.
• 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.
• textContent (string) The text content 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',
        groupSelector: 'circles'
    }, {
        tagName: 'circle',
        selector: 'circle2',
        groupSelector: 'circles'
    }]
}]

Setting attributes with selectors

• selector is unique i.e. can target a single node only.
• selector takes precedence over groupSelector.
• groupSelector targeting n nodes takes precedence over groupSelector targeting m nodes for n < m. When n === m the order how the attributes are applied is unspecified.

In the example below, the circle with the selector circle1 is filled with "red" color. All the other circles are filled with "blue" color.

cell.attr({
    circle1: { fill: 'red' },
    circles: { fill: 'blue', stroke: 'black' }
});