-
Notifications
You must be signed in to change notification settings - Fork 103
Open
Description
Hi, first of all thank you for this package, it's amazing.
Is there a way to keep the brush selection when the page is resized? I've tried to play with the onRender and onResize callbacks but I didn't manage to find a solution that works.
Here is an example to reproduce the problem. There is a brush below the scatter plot used to highlight the circles. Try to move it to the left, for example, and after resize the window.
// !preview r2d3 data=data.frame(x=rnorm(1000),y=rnorm(1000))
// Margin
var margin = {top: 20, right: 20, bottom: 100, left: 50},
width = width - margin.left - margin.right,
height = height - margin.top - margin.bottom;
// Scales
var xScale = d3.scaleLinear()
.domain(d3.extent(data, d => d.x))
.range([0, width])
.nice(),
yScale = d3.scaleLinear()
.domain(d3.extent(data, d => d.y))
.range([height, 0])
.nice();
// Axes
var xAxis = d3.axisBottom(xScale),
yAxis = d3.axisLeft(yScale)
// svg size
svg.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
// Plot group
var plot = svg.append('g')
.attr('transform',
'translate(' + margin.left + ',' + margin.top + ')');
// Add axes
plot.append('g')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
plot.append('g')
.call(yAxis);
// Add dots
var dot = plot.selectAll('circle')
.data(data)
.join('circle')
.attr('cx', d => xScale(d.x))
.attr('cy', d => yScale(d.y))
.attr('r', 3)
.attr('fill-opacity', 0.2)
.attr('stroke', 'green');
// Brush
var brush = d3.brushX()
.extent([[0, 0], [width, 20]])
.on('brush', brushed);
var brushGroup = svg.append('g')
.attr('transform',
'translate(' + margin.left + ',' + (height + 50) + ')');
brushGroup.append('g')
.call(brush)
.call(brush.move, [-1.5, 1.5].map(xScale));
function brushed(event) {
const x = event.selection;
if (x === null) {
dot.attr('stroke', null);
} else {
const s = x.map(xScale.invert);
dot.attr('stroke', d => s[0] <= d.x && d.x <= s[1] ? 'green' : null);
}
}
Metadata
Metadata
Assignees
Labels
No labels