Программный запуск события кисти D3

Question

Я видел примеры здесь и здесь , где кисть запускается в JavaScript. Я хочу понять реализацию first one.

Фон

Первый пример объединяет две линейные диаграммы D3 в один контейнер svg; классы focus и context соответственно:

Диаграмма context (отмечена синим цветом выше) - это диаграмма, содержащая кисть, которая может быть вызвана щелчком мыши:

Когда мы смотрим внутрь его контейнера группы, мы находим назначенные параметры кисти; под extent класс:

Вопрос 1.

Я не понимаю, что происходит в последних двух строках, в частности, в последней строке :

function drawBrush(a, b) {
      // define our brush extent

      // note that x0 and x1 refer to the lower and upper bound of the brush extent
      // while x2 refers to the scale for the second x-axis, for context or brush area.
      // unfortunate variable naming :-/
      var x0 = x2.invert(a*width)
      var x1 = x2.invert(b*width)
      console.log("x0", x0)
      console.log("x1", x1)
      brush.extent([x0, x1])

      // now draw the brush to match our extent
      // use transition to slow it down so we can see what is happening
      // set transition duration to 0 to draw right away
      brush(d3.select(".brush").transition().duration(500));

      // now fire the brushstart, brushmove, and brushend events
      // set transition the delay and duration to 0 to draw right away
      brush.event(d3.select(".brush").transition().delay(10duration(500))
}

В brush(d3.select(".brush").transition().duration(500)); текущие параметры кисти выбираются с предварительным условием перехода; который передается в brush, поэтому он может рисовать новую кисть в соответствии с измененными значениями brush.extend.

В brush.event(d3.select(".brush").transition().delay(10duration(500)) кажется, что предыдущая строка устанавливает параметры, после чего brush.event выполняет с новыми параметрами кисти. Может ли кто-то понять это? Как события кисти применяются к этому случаю?

Вопрос 2.

Я также не понимаю, как именно это событие связывается с диаграммой редактирования focus. Если найти механизмы через обратные вызовы довольно загадочно:

var brush = d3.svg.brush()
      .x(x2)
      .on("brush", brushed);

Этот фрагмент выглядит кристально чистым: кисть создана и связана с прослушивателем событий brush. На событии кисти, brushed будет действовать как обработчик события. Кроме того, шкала context оси x x2 передается на кисть, так как она находится на диаграмме context.

Но я не совсем уверен, как brushed работает:

  function brushed() {
    x.domain(brush.empty() ? x2.domain() : brush.extent());
    focus.select(".area").attr("d", area);
    focus.select(".x.axis").call(xAxis);
  }

Просто чтобы быть уверенным, правильно ли, что новая ось генерируется в focus.select(".x.axis").call(xAxis); с параметрами brush, установленными в x.domain(brush.empty() ? x2.domain() : brush.extent());?

Answer 1

Во-первых, в последней строке есть опечатка. В коде это на самом деле:

brush.event(d3.select(".brush").transition().delay(1000).duration(500))

Возвращаясь к вашему вопросу, путаница, с которой вы сталкиваетесь, пытаясь понять, что события кисти связаны с ней, довольно проста: вы читаете документы D3 v4 . в то время как этот код использует D3 v3 .

Это brush.event в D3 v3:

brush.event ( выбор )

Если выделение является выделением, оно отправляет жест кисти зарегистрированным слушателям в виде трех последовательностей событий: brushstart, brush и brushend. Это может быть полезно для запуска слушателей после программной установки степени кисти . (выделение мое)

Как вы можете ясно видеть, первая строка изменяет саму кисть ( context ), а вторая изменяет диаграмму большой площади ( focus ).