Class: c3.Selection.Options

Defined in:

js/c3.coffee

Overview

c3 selection options are used to allow the user of a c3 visualization to define a set of values and accessors callbacks to set the styles, classes, event handlers, text, etc of specific set of DOM nodes defined in that visualization's c3 selection.

For example, the user can set these options in the circle_options property in a scatter plot layer to describe how those circles should behave. Because they are persisted in an options object, the c3 visualization can continue to use them to update the circles based on new data, etc. The user can also usually dynamically change the options at a later time, and the changes will be reflected when the visualization redraws or restyles.

The c3 selection options class is really just a convention which described the types of properties users can set. You don't actually need to instantiate this class prototype, just make sure that the object you use has the same property names.

Variables Summary

class =

undefined

[String, Function] A function or value to set the CSS class of the DOM nodes. The function is called with the datum and index of the data elements as arguments. The this context is setup to refer to the DOM node.

classes =

undefined

[Object] An object to set CSS classes. Keys in the object represent class names and values are either a boolean or a function that returns a boolean that determines if that class should be added or removed from the node. The functions are passed the datum and index of the data element as arguments. The this context is setup to refer to the DOM node.

styles =

undefined

[Object] An object to set CSS styles. Keys in the object represent style names and values are either a value or a function that returns the value to set the style. A null value will remove the style from the node. The functions are passed the datum and index of the data element as arguments. The this context is setup to refer to the DOM node.

events =

undefined

[Object] An object to set event handlers for the DOM nodes. Keys in the object represent event names and values are the event handler functions that will be called. The handlers are setup and called by D3 which pass the datum and index of the data element as arguments. The this context refers to the DOM node. Event names may be namespaced to manage multiple handlers on the same event, please see d3.selection.on. Note that the conventions used by D3 for managing multiple handlers and namespacing are different from JQuery's event handling.

text =

undefined

[String, Function] A string or function to set the text of the DOM nodes. This is not applicable for all node types. If this is a function, it will be called with the datum and index of the data element as arguments and the this context setup to refer to the DOM node.

html =

undefined

[String, Function] A string or function to set the child HTML content for the DOM nodes. This is not applicable for all node types. If this is a function, it will be called with the datum and index of the data element as arguments and the this context setup to refer to the DOM node.

Using this instead of text can be useful in some circumstances where you would like to use HTML markup for the text. For example: "This is <b>bold</b> text". However, if you use this for that reason remember that you need to escape certain characters properly as you normally would in html. Please also consider user-provided strings and security, as unsafe scripts may be included. Using html will take precedence over setting text for a selection.

title =

undefined

[String, Function] A string or function to set tooltips for the DOM nodes. Setting this will cause the selection's nodes to have child <title> nodes created. If this is a function, it will be called with the datum and index of the data element as arguments and the this context setup to refer to the DOM node.

animate =

undefined

[Boolean] Request animation of the nodes when positioning their attributes. New nodes will not animate, they will be immediately set to their new position. However, new nodes will fade in and old nodes will fade out unless the opacity style is defined.

duration =

undefined

[Number] Duration for any requested animations in ms. Defaults to 750ms

animate_old =

undefined

[Boolean] Animate the positioning of old elements as they are removed in addition to fading out