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)});