How We Built a Multi‑Dimensional Fund Selection Tool with F2 4.0 Gestures

Editor’s note: The author, a former Ant Group front‑end engineer, upgraded the "Index Zone" of Alipay’s Fund product in August‑September, leveraging F2 4.0’s powerful mobile gesture capabilities to create a multi‑dimensional exploratory fund‑selection tool.

Users can view a scatter plot that compares the entire market’s index funds on two dimensions—"return" and "volatility"—and pick the fund that best fits their investment goals. This feature is referred to as the "Index Map".

Key Features

Fine‑tuned mobile gestures: pan, zoom, and swipe work seamlessly.

Interactive linkage between the bottom product cards and the chart.

Adaptive bubble sampling with automatic focus to handle dense data points.

Lazy loading of card data with in‑memory caching.

Layered M‑C‑V (Model‑Controller‑View) architecture for reusable components.

Development Process

1. Product Research

Inspired by the "Food Map" in the Dazhong Dianping app, the team examined similar products to gather interaction details and design ideas.

2. Functional Analysis

Each requirement was broken down into component‑level tasks, laying the groundwork for a modular design.

3. Generic Design

Three main actions were taken:

Layered Design : Separate the logic into M (data layer) - C (controller layer) - V (view layer).

Concept Standardization : Define clear terminology for cross‑team communication.

Core Flow Definition : Outline four primary flows—initialization, scatter‑plot interaction, bottom‑card interaction, and top‑tab interaction.

4. Difficulty Analysis

Potential challenges such as simultaneous X/Y pan‑zoom, swipe damping, view‑clip overlay, z‑index rendering, and performance optimizations were identified.

Implementation Highlights

Gesture Optimization

Both X‑axis and Y‑axis can be panned and zoomed at the same time.

Improved swipe experience with reduced damping.

View‑clip masking for elements that move out of the visible area.

zIndex handling for proper layer rendering.

Performance tweaks for smooth pan and zoom.

Bubble Sampling

To avoid clutter when many points are close together, the algorithm marks a point as "dirty" if another point exists within a certain radius, then only renders bubbles for "clean" points.

Fetching Visible Points

- Listen for PanEnd, PinchEnd, SwipeEnd events
- Obtain the latest scales after interaction
- Filter the original dataset by the current x and y ranges
- Remove dirty points identified by the sampling step
- Render the bottom cards based on the filtered result
- End

function getRecordsByZoomScales(scales, data) {
  const { x: xScale, y: yScale } = scales;
  const { field: xField, min: xMin, max: xMax } = xScale;
  const { field: yField, min: yMin, max: yMax } = yScale;

  return data.filter(record => {
    const inView =
      record[xField] >= xMin && record[xField] <= xMax &&
      record[yField] >= yMin && record[yField] <= yMax;
    return inView;
  });
}

export default props => {
  const { data } = props;
  function handlePanEnd(scales, data) {
    getRecordsByZoomScales(scales, data);
  }
  return (
    <ReactCanvas>
      <Chart>
        {/* ... */}
        <ScrollBar onPanEnd={handlePanEnd} />
      </Chart>
    </ReactCanvas>
  );
};

Lazy Loading & Caching

Because each bottom card contains extensive fund information, the system loads only the data for cards near the current view (N±2) and caches previously fetched cards to reduce API calls.

- Trigger scatter‑plot interaction or card swipe
  - Read cache, filter out uncached cards
  - Request data for uncached cards
  - Write results to cache
  - Update card UI with new data
- Render updated cards

Online Results

After launch, the scatter‑plot interaction rate (pan and zoom) was very high, indicating strong user interest in the new exploratory tool. Some users completed fund selection or performed detailed product comparisons via the bottom cards.

Acknowledgements

Thanks to AntV and the F2 team for their support of mobile chart interactions.