How to use the vega.extend function in vega

public handleDragEnd = (evt: React.DragEvent, opts?) => {
    const props = this.props;
    const sel = sg.get(SELECTED);
    const cell = sg.get(CELL);
    const bindField = this.state.bindField;
    const dropped = tupleid(sel) && tupleid(cell);
    const dsId = bindField.source ? props.srcId : props.dsId;

    try {
      if (dropped) {
        const lyraId = +sel.mark.role.split('lyra_')[1];
        vega.extend(bindField, opts); // Aggregate or Bin passed in opts.
        props.bindChannel(dsId, bindField, lyraId, cell.key);
      }
    } catch (e) {
      console.error('Unable to bind primitive');
      console.error(e);
    }

    sg.set(MODE, 'handles');
    sg.set(CELL, {});
    this.setState({bindField: null});

    if (!dropped) {
      ctrl.update();
    }
  }

const PAD15 = 3.5 * PAD;
const DELTA = 0.01;

/**
 * @classdesc Represents the SymbolManipulators, a Vega data transformation operator.
 * @param {Model} graph - A Vega model.
 * @description The SymbolManipulators calculates manipulators when a symbol
 * mark instance is selected.
 * @extends Manipulators
 * @constructor
 */
export default function SymbolManipulators(params) {
  Manipulators.call(this, [], params);
}

SymbolManipulators.Definition = extend({}, Manipulators.Definition);

const prototype = inherits(SymbolManipulators, Manipulators);

prototype.handles = function(item) {
  var c = coords(item.bounds, 'handle');
  return [
    c.topLeft, c.topRight,
    c.bottomLeft, c.bottomRight
  ];
};

prototype.connectors = function(item) {
  var c = coords(item.bounds, 'connector');
  return [c.midCenter];
};

    tpls.forEach((d, i) => extend(cache[i], d));
    out.mod = cache;

    EXTENTS.map(ext => extend({}, {ts: (map && map[ext.name]) || 0}, ext))
      .sort(compare('ts', 'descending'))

function createScale(dispatch: Dispatch, parsed: CompiledBinding, def: RangeScale): ActionType {
  const {domain, ...rest} = def,
    props = isDataRefDomain(domain)
      ? extend({}, rest, {_domain: [{data: parsed.map.data[domain.data], field: domain.field}]})
      : def;

  const action = addScale(Scale(props));
  return (dispatch(action), action);
}

const PAD2 = 2 * PAD;

/**
 * @classdesc Represents the RectManipulators, a Vega data transformation operator.
 *
 * @description The RectManipulators calculates manipulators when a rect mark
 * instance is selected.
 * @extends Manipulators
 * @param {Model} graph - A Vega model.
 * @constructor
 */
export default function RectManipulators(params) {
  Manipulators.call(this, [], params);
}

RectManipulators.Definition = extend({}, Manipulators.Definition);

const prototype = inherits(RectManipulators, Manipulators);

prototype.handles = function(item) {
  const c = coords(item.bounds, 'handle');
  return Object.values(c).filter(x => x.key !== 'midCenter');
};

prototype.connectors = function(item) {
  return Object.values(coords(item.bounds, 'connector'));
};

prototype.channels = function(item) {
  var b = item.bounds,
      gb = item.mark.group.bounds,
      c = coords(b),

/**
 * @classdesc Represents the AreaManipulators, a Vega data transformation operator.
 *
 * @description The AreaManipulators calculates manipulators when a Area
 * mark instance is selected.
 * @extends Manipulators
 *
 * @param {Model} graph - A Vega model.
 *
 * @constructor
 */
export default function AreaManipulators(params) {
  Manipulators.call(this, [], params);
}

AreaManipulators.Definition = extend({}, Manipulators.Definition);

const prototype = inherits(AreaManipulators, Manipulators);

prototype.handles = function(item) {
  const bounds = item.mark.bounds;
  const c = coords(bounds, 'handle');
  return [
    c.topLeft, c.topRight,
    c.bottomLeft, c.bottomRight
  ];
};

prototype.connectors = function(item) {
  const bounds = item.mark.bounds;
  const c = coords(bounds, 'connector');
  return [c.midCenter];

/**
 * @classdesc Represents the TextManipulators, a Vega data transformation operator.
 *
 * @description The TextManipulators calculates manipulators when a text mark
 * instance is selected.
 * @extends Manipulators
 *
 * @constructor
 * @param {Object} graph - A Vega model.
 */
export default function TextManipulators(params) {
  Manipulators.call(this, [], params);
}

TextManipulators.Definition = extend({}, Manipulators.Definition);

const prototype = inherits(TextManipulators, Manipulators);

prototype.handles = function(item) {
  var c = coords(item.bounds, 'handle');
  return [
    c.topLeft,
    c.bottomRight
  ];
};

prototype.connectors = function(item) {
  var c = coords(item.bounds, 'connector');
  return [c.midCenter];
};

function sortDataRef(data, scale, field) {
  const ref = {data: name(data.get('name')), field: field};
  if (scale.type === 'ordinal' && data.get('_sort')) {
    const sortField = getIn(data, '_sort.field');
    return extend({}, ref, {
      sort: sortField === ref.field ? true : {field: sortField, op: 'min'},
      _sortOrder: getIn(data, '_sort.order')
    });
  }

  const dsId = data.get('_id'),
    count = counts.data[dsId] || (counts.data[dsId] = duplicate(DATA_COUNT));
  count.scales[scale._id] = true;
  return ref;
}