Zoom
Configuration Options
barFilledColor
Type: color
Default: "#555555"
Fill color of the bar
barNotFilledColor
Type: color
Default: "#E4E5E5"
Color of the bar when it is not filled
fontFamily
Type: string
Default: "Open Sans"
Font family of the min and max labels
height
Type: number
Default: 4
The height of the chart
isOnMobile
Type: boolean
Default: false
If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.
knobColor
Type: color
Default: "#555555"
Fill color of the knob
knobRadius
Type: number
Default: 8
Units: px
Radius of the knob
max
Type: number
Default: 100
The max value of the chart
min
Type: number
Default: 0
The min value of the chart
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
textColor
Type: color
Default: "#333333"
Text color of the range values
textSize
Type: number
Default: 14
Units: px
Text size of the range values
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
width
Type: number
Default: 350
The width of the chart
zoomPercent
Type: number
Default: 0.75
Percent fill of the zoom bar (this value is changed with the moving of the knob)
Data Definition
Events
Dispatch Events
dispatch:mousedrag
External Events
Example
//Initialze the widget
var chart = d3.select("#vis")
.append("svg")
.attr({
'height': '500px',
'width': '500px',
})
.append("g")
.attr("transform", "translate(50,50)")
.chart("Zoom")
//Render the chart without data
chart.draw();
// chart.on('zoomTrigger', function(val){console.log('zoom', val)});