This basically implements the brushing and zooming feature like mg-line-brushing
. It may be not ready to be merged into master branch. But I hope to share some problems I found and to get some suggestions.
Some difference with the addons
- I take a more independent approach to this feature and decompose it into some functions for easier to control. I add two options to allow the user to use this feature. If not set will not have any effect on the original function.
- Compared with addons, I will add the brushing function when the chart's initialization function be called and directly use the
descriptor
to redraw the chart for avoiding repeated call hooks.
Some problems
For the line chart, we need not to filter the data out of range in order to ensure the integrity of the line.
But for the point chart, we should drop those data out of range, if not there will be some points drawn outside the chart because of the different ways of drawing. I tried to filter them in the mainPlot
method in point.js but the axis will still be drawn. So I filter the data when the chart type is point. I don’t know if this is appropriate?
Because different types of charts are drawn in different ways, some changes need to be made for them. Do I need to support this function for other charts except line and point?
I largely borrowed code of the addons, so that some operations I'm not sure whether it has the right effect. Such as convert mouse selection range to data domain and set the range of selection graphic.
Here is my effect on manual testing of some data.
Now I only added brush
and zoom_target
. This is enough to restrict brushing axis and add an overview plot. Should I add more options or is there any better option?
For setting a zooming target chart, I don't know how to do it better. The way I am now taking is to set an args as a variable and set it to another option. Like following way. Are there any better ways?
const main = {
title: "UFO Sightings",
description: "Yearly UFO sightings from 1945 to 2010.",
data: JSON.parse(document.querySelector('.data textarea').value),
markers: [{'year': 1964, 'label': '"The Creeping Terror" released'}],
width: 400,
height: 250,
target: ".result",
x_accessor: "year",
y_accessor: "sightings",
brush: 'x',
}
MG.data_graphic(main);
MG.data_graphic({
data: JSON.parse(document.querySelector('.data textarea').value),
width: 400,
height: 150,
target: ".overview",
x_accessor: "year",
y_accessor: "sightings",
brush: 'x',
zoom_target: main,
x_axis: false,
y_axis: false,
show_rollover_text: false,
});