Im trying to select data after zooming but d3.event.selection is always getting same values. Any one have an idea please ?
private zoomChart(DataType: any[], color) {
this.createChart(DataType, this.t, color);
this.zoom = d3.zoom().scaleExtent([0, 1000])
.on("zoom", () => {
const transform = d3.event.transform;
this.t = transform;
this.draw(this.context, transform, DataType, this.train,
this.gxAxis, this.gyAxis,
this.xAxis, this.yAxis, this.x, this.y)
});
this.canvasChart.call(this.zoom);
this.canvasChart.style('z-index', 1);
this.svgChart.style('z-index', 1);
}
private selectionChart(DataType: any[], color) {
this.zoomChart(DataType, color);
this.brush = d3.brush().extent([
[0, 0],
[this.width, this.height]
])
.on("start", () => {
this.brustStart(DataType);
})
.on("end", () => {
this.brudhtest(DataType, this.train, this.dataSelection, this.t);
});
if (!this.svgChart) {
this.svgChart = this.svgChart
.append("g")
.attr("class", "brush")
.style("color", "red");
}
this.svgChart.call(this.brush);
this.svgChart.style('z-index', 1);
this.canvasChart.style('z-index', 0);
}
brudhtest(test, test2, dataSel, transform) {
let extent = d3.event.selection
console.log(extent)
console.log(transform.k)
if (!extent) return;
var x0 = (extent[0][0]),
x1 = (extent[1][0]),
y0 = (extent[0][1]),
y1 = (extent[1][1])
let elementsOfInterest = test.filter(element => {
if (
x0 <= this.x(element[a])
&& this.x(element[a]) <= x1 &&
y0 <= this.y(element[b])
&& this.y(element[b]) <= y1
) {
console.log(x0);
}})
This is the code. When i dont zoom, the selection is correct, but when i do a zoom and then i select it did not work, the brush waork only when i select the same zone as i did not zoom . Any idea please ?
