understanding-graphs/src/js/d3/handleConnector.js

import * as d3 from 'd3';

const createHandleConnector = (config, _leftHandle, _rightHandle) => {

  let rightHandle = _rightHandle;
  let leftHandle = _leftHandle;

  let offset = {
    x: leftHandle.width() / 2,
    y: -config.connectorHeight / 2
  };

  let node; // plain svg node

  const handleConnector = (selection) => {
    let rect = selection.append('rect')
      .attr('class', 'mod2-rect__connector')
      .attr('height', config.connectorHeight)
      .attr('stroke-width', config.strokeWidth)
      .attr('stroke', config.colors.axis);

    node = rect.node();
    handleConnector.update();
  };

  handleConnector.update = (withTransition = false) => {

    let element = d3.select(node);

    if (withTransition) {
      element = element.transition()
        .duration(config.duration);
    }

    element
      .attr('x', leftHandle.x() + offset.x)
      .attr('y', leftHandle.y() + offset.y)
      .attr('width', rightHandle.x() - leftHandle.x() - leftHandle.width());
  };

  return handleConnector;
};

export default createHandleConnector;