D3 v5 bru sh для увеличения

Question

Я должен реализовать бу sh для увеличения визуализации.

Это функция, которую я должен написать:

function brushUpdate(brush, g, line, xFocus, xContext, xAxis, yAxis) {
      // my current code:
      var s = d3.event.selection || xContext.range();
      xContext.domain(s.map(xFocus.invert, xFocus))
      g.select(".path").attr("d", line)
      g.select(".axis--x").call(xAxis)
      g.select(".axis--y").call(yAxis)

}

Вот объявления различных параметров

bru sh:

var brush = d3.brushX()
    .extent([[0, 0], [widthContext, heightContext]])
    .on("brush", function () {
      brushUpdate(brush, focus, lineFocus, xFocus, xContext, xAxisFocus, yAxisFocus);
    });

г:

var focus = svg.append("g")
    .attr("transform", "translate(" + marginFocus.left + "," + marginFocus.top + ")");

строка:

d3.line()
  .x(function(d) { return x(d.date);})
  .y(function(d) { return y(d.count);})
  .curve(d3.curveBasisOpen)

xFocus:

var xFocus = d3.scaleTime().range([0, widthFocus]);

xContext:

var xContext = d3.scaleTime().range([0, widthContext]);

xAxis:

var xAxisFocus = d3.axisBottom(xFocus).tickFormat(localization.getFormattedDate);

yAxis:

var yAxisFocus = d3.axisLeft(yFocus);

Я начинаю с JS, поэтому я полагаю, что обновляю домен xContext, но не вижу никакой разницы в визуализации. Если вам нужно больше информации, это github проекта .

Я прочитал do c, но это мне не очень помогает, и учебники / примеры, которые я нашел ни, например, этот или этот другой