The getUserActionOnMouseDown lambda of the events config can be used to customize whick key trigger which user action (zoom, pan, select...). Here, we change the default key (CTRL or META) for zoom to the ALT key. You can now press ALT, then click drag the mouse to zoom on a part of the chart.
Changing the drag-zoom action key to ALT
import io.data2viz.charts.*
import io.data2viz.charts.dimension.*
import io.data2viz.charts.chart.*
import io.data2viz.charts.chart.mark.*
import io.data2viz.charts.viz.*
import io.data2viz.charts.core.*
import io.data2viz.charts.core.Zoom
import io.data2viz.charts.core.SelectionMode
import io.data2viz.charts.core.Datum
import io.data2viz.charts.layout.*
import io.data2viz.geom.*
import io.data2viz.color.*
import io.data2viz.math.*
import kotlin.random.Random
import kotlinx.browser.document
import org.w3c.dom.*
val numPoint = 200
val randomPoints = (1 .. numPoint).map{ Point(Random.nextDouble(), Random.nextDouble() * 3 - 0.36) }.sortedBy { it.x }
val chartWidth = 700.0
val chartHeight = 500.0
fun main() {
val vc = newVizContainer().apply {
size = Size(chartWidth, chartHeight)
}
vc.chart(randomPoints) {
config {
// Disable user-input highlight & selection from the chart
events {
zoomMode = ZoomMode.XY
panMode = PanMode.XY
selectionMode = SelectionMode.Multiple
highlightMode = HighlightMode.None
getUserActionOnMouseDown = { event ->
when {
event.altKey -> UserAction.Zoom
else -> UserAction.Select
}
}
}
}
val xPosition = quantitative( { domain.x } )
val yPosition = quantitative( { domain.y } )
plot(xPosition, yPosition)
}
}
Sketch created by
pierre
comments