Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Brush selection lost after page resize #97

Open
sgvignali opened this issue Dec 16, 2021 · 0 comments
Open

Brush selection lost after page resize #97

sgvignali opened this issue Dec 16, 2021 · 0 comments

Comments

@sgvignali
Copy link

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);
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant