renderWhiskerMark = whiskerMarkProps => (d, i) => {
  const {
    crossBarWidth,
    opacityFunctor,
    sizeFunctor,
    strokeFunctor,
    strokeWidth,
    style,
    valueClickHandler,
    valueMouseOutHandler,
    valueMouseOverHandler,
    valueRightClickHandler,
    xFunctor,
    yFunctor
  } = whiskerMarkProps;

  const r = sizeFunctor ? sizeFunctor(d) : 0;
  const cx = xFunctor(d);
  const cy = yFunctor(d);
  const positiveXVariance = xFunctor({x: d.x + d.xVariance / 2});
  const negativeXVariance = xFunctor({x: d.x - d.xVariance / 2});
  const positiveYVariance = yFunctor({y: d.y + d.yVariance / 2});
  const negativeYVariance = yFunctor({y: d.y - d.yVariance / 2});
  /**
   * Determine whether on not we should draw whiskers in each direction.
   * We need to see an actual variance value, and also have that value extend past the
   * radius "buffer" region in which we won't be drawing (if any).
   */
  const hasXWhiskers = positiveXVariance && cx + r < positiveXVariance;
  const hasYWhiskers = positiveYVariance && cy - r > positiveYVariance;
  if (!hasXWhiskers && !hasYWhiskers) {
    return null;
  }

  const styleAttr = {
    opacity: opacityFunctor ? opacityFunctor(d) : DEFAULT_OPACITY,
    stroke: strokeFunctor && strokeFunctor(d),
    strokeWidth: strokeWidth || DEFAULT_STROKE_WIDTH,
    ...style
  };
  const crossBarExtension = crossBarWidth / 2;

  const rightLineAttrs = {
    x1: cx + r,
    y1: cy,
    x2: positiveXVariance,
    y2: cy,
    style: styleAttr
  };
  const leftLineAttrs = {
    x1: cx - r,
    y1: cy,
    x2: negativeXVariance,
    y2: cy,
    style: styleAttr
  };
  const rightCrossBarAttrs = {
    x1: positiveXVariance,
    y1: cy - crossBarExtension,
    x2: positiveXVariance,
    y2: cy + crossBarExtension,
    style: styleAttr
  };
  const leftCrossBarAttrs = {
    x1: negativeXVariance,
    y1: cy - crossBarExtension,
    x2: negativeXVariance,
    y2: cy + crossBarExtension,
    style: styleAttr
  };

  const upperLineAttrs = {
    x1: cx,
    y1: cy - r,
    x2: cx,
    y2: positiveYVariance,
    style: styleAttr
  };
  const lowerLineAttrs = {
    x1: cx,
    y1: cy + r,
    x2: cx,
    y2: negativeYVariance,
    style: styleAttr
  };
  const upperCrossBarAttrs = {
    x1: cx - crossBarExtension,
    y1: positiveYVariance,
    x2: cx + crossBarExtension,
    y2: positiveYVariance,
    style: styleAttr
  };
  const lowerCrossBarAttrs = {
    x1: cx - crossBarExtension,
    y1: negativeYVariance,
    x2: cx + crossBarExtension,
    y2: negativeYVariance,
    style: styleAttr
  };

  return (
    <g
      className="mark-whiskers"
      key={i}
      onClick={e => valueClickHandler(d, e)}
      onContextMenu={e => valueRightClickHandler(d, e)}
      onMouseOver={e => valueMouseOverHandler(d, e)}
      onMouseOut={e => valueMouseOutHandler(d, e)}
    >
      {hasXWhiskers ? (
        <g className="x-whiskers">
          <line {...rightLineAttrs} />
          <line {...leftLineAttrs} />
          <line {...rightCrossBarAttrs} />
          <line {...leftCrossBarAttrs} />
        </g>
      ) : null}
      {hasYWhiskers ? (
        <g className="y-whiskers">
          <line {...upperLineAttrs} />
          <line {...lowerLineAttrs} />
          <line {...upperCrossBarAttrs} />
          <line {...lowerCrossBarAttrs} />
        </g>
      ) : null}
    </g>
  );
}
Render whisker lines for a data point.
@param {Object} whiskerMarkProps All the properties of the whisker mark.
@private