Skip to content

Brush selection lost after page resize #97

@sgvignali

Description

@sgvignali

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions