levvsha

const zoom = d3.zoom()
  .scaleExtent([0.95, 10])
  .translateExtent([[-100000, -100000], [100000, 100000]])
  .on('start', () => {
    hoverDot
      .attr('cx', -5)
      .attr('cy', 0);
  })
  .on('zoom', zoomed);

levvsha

svg.append('defs').append('clipPath')
  .attr('id', 'clip')
  .append('rect')
  .attr('width', width)
  .attr('height', height);
  
/* ... */
  
const linesContainer = svg.append('g')
  .attr('clip-path', 'url(#clip)');

levvsha

function zoomed() {
  const transformation = d3.event.transform;

  rescaledX = transformation.rescaleX(x);
  rescaledY = transformation.rescaleY(y);

  xAxisElement.call(xAxis.scale(transformation.rescaleX(x)));
  yAxisElement.call(yAxis.scale(d3.event.transform.rescaleY(y)));

  linesContainer.selectAll('path')

levvsha

const lineGenerator = d3.line()
  .x(d => rescaledX(d.date))
  .y(d => y(d.percent))
  .curve(d3.curveCardinal);

/* ... */

function voronoiMouseover(d) {

  /* ... */

levvsha

const margin = { top: 0, right: 20, bottom: 50, left: 50 };
const previewMargin = { top: 10, right: 10, bottom: 15, left: 30 };
const width = 920 - margin.left - margin.right;
const height = 390 - margin.top - margin.bottom;

const ratio = 4;

const previewWidth = width / ratio;
const previewHeight = height / ratio;

levvsha

const previewX = d3.scaleTime()
  .range([0, previewWidth]);

const previewY = d3.scaleLinear()
  .range([previewHeight, 0]);

/* ... */

previewX.domain(d3.extent(data, d => d.date));
previewY.domain([0, d3.max(data, d => d.percent)]);

levvsha

  const preview = d3.select('.preview')
    .append('svg')
    .attr('width', previewWidth + previewMargin.left + previewMargin.right)
    .attr('height', previewHeight + previewMargin.top + previewMargin.bottom)
    .append('g')
    .attr('transform', `translate(${ previewMargin.left },${ previewMargin.top })`);

  const previewContainer = preview.append('g');

  preview.append('g')

levvsha

function dragged(d) {
  d3.select(this)
    .attr('x', d.x = d3.event.x)
    .attr('y', d.y = d3.event.y);

  zoomNode.call(zoom.transform, d3.zoomIdentity
    .scale(currentTransformationValue)
    .translate(-d3.event.x * ratio, -d3.event.y * ratio)
  );
}

levvsha

function zoomed() {
  const transformation = d3.event.transform;
  
  /* ... */

  const xPreviewPosition = previewX.range().map(transformation.invertX, transformation)[0];
  const yPreviewPosition = previewY.range().map(transformation.invertY, transformation)[1];

  currentTransformationValue = transformation.k;

levvsha

/**
 * Возвращает существительное в соответствующей словоформе для числа переданного первым аргументом
 *
 * @param {Number} num      Число
 * @param {Object} cases    Варианты слова {nom: 'час', gen: 'часа', plu: 'часов'}
 * @return {String}
 */
export default function (num, cases) {
  let word = '';