D3 - изменяемый размер графика с кистью

Question

Я создал график временных рядов с выбором bru sh на основе примера MB , однако я пытаюсь изменить размер графика.

Мне нужен выбор bru sh сохраняться между изменениями размера, так что диаграмма «фокус» показывает одинаковый диапазон данных до и после события изменения размера.

Я считаю, что мне нужно сохранить выделение (как t1, t2), а затем повторно применить его после того, как все элементы были изменены, но я не уверен в лучшем способе достижения этого.

Я прочитал документацию и не могу найти никаких предложений относительно программно получения / установки выбор из значений t.

Я соберу вызов brush.move:

  context.select("g.brush")
    .call(brush)
    .call(brush.move, x.range());

, но я не уверен, как изменить это, чтобы восстановить предыдущий выбор.

В случае, если это помогает, я создал работающую скрипку, за исключением выбора bru sh, который сбрасывается при каждом изменении размера.

https://jsfiddle.net/vdqg4rsm/12/

Answer 1

Во-первых, при изменении размера - запишите коэффициент изменения ширины:

  var widthBefore = width;
  width = svgWidth - margin.left - margin.right;

, а затем определите текущий bru sh selection

  var brushSelection = null;
  var brushNode = context.select("g.brush").node();
  if (brushNode)
    brushSelection = d3.brushSelection(brushNode);

и измените выбор в соответствии с коэффициент изменения

  if (brushSelection) {
    brushSelection = brushSelection.map(function(x) {
      return x * (width / widthBefore);
    });
  }

, если нет выбора, отступить к чему-то действительному

  else
    brushSelection = x.range();

, затем применить это к bru sh

  context.select("g.brush")
    .call(brush)
    .call(brush.move, brushSelection);