components.nf-svg-image Class
An image to be displayed in a graph with that takes domain based measurements and
uses the scale of the graph. Creates an <image class="nf-image"/> SVG element.
Item Index
Methods
_trackedDataChanged
()
private
Observes changes to tracked data and sends the didTrack action.
_updateGraphSelected
()
private
Makes calls to the parent nf-graph to update it's
selected property. Observes changes to selected and also
fires on didInsertElement.
init
()
Initalization method that gets the nf-graph parent
and assigns it to graph
NOTE: all object that mixin and have init, must call super.init()
Properties
didTrack
String
The action to send on didTrack.
Default: null
height
Unknown
The height as a domain value. Does not
handle ordinal scales. To set a pixel value, just
set svgHeight directly.
Default: null
hoverData
Object an object with the following values:
- point: an x, y pair for the exact px coordinates inside the graph-content
- graphX: domain x value at mouse position
- graphY: domain y value at mouse position
- x: nearest x data value
- y: nearest y data value
- data: nearest raw data
- renderX: domain x value to render a tracking dot at (stacked areas are offset)
- renderY: domain x value to render a tracking dot at (stacked areas are offset)
- mouseX: mouse x position in pixels
- mouseY: mouse y position in pixels
The value of the data that is being tracked by the component, ONLY if the graph-content is currently being hovered.
Default: null
isSelected
Unknown
deprecated
Alias of selected
scaleOffsetX
Number
The offset, in pixels, for the x scale
Default: 0
scaleOffsetY
Number
The offset, in pixels, for the y scale
Default: 0
scaleZoomX
Number
The zoom multiplier for the x scale
Default: 1
scaleZoomY
Number
The zoom multiplier for the y scale
Default: 1
selectable
Boolean
Gets or sets whether or not the graphic is "selectable". Meaning can be "selected" on the nf-graph via some action (usually click). The component will then show up in the nf-graph parent's selected property.
Default: false
selected
Boolean
Gets or sets whether or not the graphic is selected.
Default: false
showTrackingDot
Boolean
Gets or sets whether the tracking dot should be shown at all.
Default: true
src
String
The image source url
svgHeight
Number
The height, in pixels of the image.
svgWidth
Number
The width, in pixels, of the image.
svgX
Number
The pixel value at which to plot the image.
svgY
Number
The pixel value at which to plot the image.
trackedData
Object an object with the following values:
- point: an x, y pair for the exact px coordinates inside the graph-content
- graphX: domain x value at mouse position
- graphY: domain y value at mouse position
- x: nearest x data value
- y: nearest y data value
- data: nearest raw data
- renderX: domain x value to render a tracking dot at (stacked areas are offset)
- renderY: domain x value to render a tracking dot at (stacked areas are offset)
- mouseX: mouse x position in pixels
- mouseY: mouse y position in pixels
The value of the data that is being tracked by the component.
Default: null
trackingDotRadius
Number
The radius of the tracking dot in pixels
Default: 2.5
trackingMode
String
Gets or sets the tracking mode of the component.
Possible values are:
- 'none': no tracking behavior
- 'hover': only track while mouse hover
- 'snap-last': track while mouse hover, but snap to the last data element when not hovering
- 'snap-first': track while mouse hover, but snap to the first data element when not hovering
- 'selected-hover': The same as
'hover'tracking mode, but only when the compononent is selected - 'selected-snap-last': The same as
'snap-last'tracking mode, but only when the compononent is selected - 'selected-snap-first': The same as
'snap-first'tracking mode, but only when the compononent is selected
Default: 'none'
width
Number
The width as a domain value. Does not handle ordinal
scales. To set a pixel value, set svgWidth directly.
Default: 0
x
Unknown
The domain x value to place the image at.
Default: null
xScale
d3.scale
The x scale used by this component
y
Unknown
The domain y value to place the image at.
Default: null
yScale
d3.scale
The y scale used by this component