D3.js缩放后折线形态异常问题求助

Hey there! Let's break down why your line chart is getting distorted on zoom and eventually stops updating—your data join logic for the line paths has some key issues that are throwing off D3's update pattern. Here's how to fix it:

Key Problems in Your Current Code #

• Incorrect Data Binding: You're binding individual data points (graph.Fdata) to line path elements, but each line path should be bound to the entire dataset array (since one path represents all points for a line). This mismatch breaks D3's enter/update/exit flow over repeated zoom updates.
• Split Initialization/Update Logic: The !(graph.oldFdata.length) check creates two separate code paths for initial render vs updates, leading to inconsistencies when scales change during zoom.
• Unreliable Path Re-calculation: When you zoom, you update xScaleTemp/yScaleTemp, but your original logic wasn't consistently regenerating the path's d attribute with the updated scales.

Corrected Code & Explanations #

First, rewrite the data_join function to follow D3's standard enter/update/exit pattern correctly for line paths:

function data_join(num) {
  // Define the selector for this line series
  const lineSelector = `.data-line${graph.opt.name}${num}`;
  
  // Critical: Bind the FULL dataset array to the path (wrap in [] to treat it as one datum)
  const lineUpdate = graph.dataGroup.selectAll(lineSelector)
    .data([graph.Fdata]);

  // Enter: Create new path element if it doesn't exist yet
  const lineEnter = lineUpdate.enter()
    .append("path")
    .attr("class", `data-line${graph.opt.name}${num}`);
    // Add base styling here (stroke color, width, etc.) if needed

  // Merge enter and update selections to apply shared updates
  const lineMerged = lineEnter.merge(lineUpdate);

  // Update the path with the latest line function (uses updated scales from zoom)
  lineMerged
    .transition()
    .duration(graph.spd_transition !== -1 ? graph.spd_transition : 0)
    .attr("d", graph[`lineFunction${num}`]);

  // Clean up any unused paths (good practice, though unlikely here)
  lineUpdate.exit().remove();
}

Then simplify updateData to use a unified flow for both initial render and zoom updates:

function updateData() {
  for (var i = 1; i < graph["keys_list"].length; i++) {
    if (!graph[`lineFunction${i}`]) {
      indic_gen(i);
      indicGrp(i);
      line_gen(i); // Ensure line function is created if missing
    }
    data_join(i);
  }

  for (var i = 1; i < Object.keys(graph.Fdata[0]).length; i++) {
    set_tooltip(i);
  }

  // Update old data reference to keep consistency for future updates
  graph.oldFdata = [...graph.Fdata];
}

Additional Tips #

• Scale Sync: Make sure your zoom handler updates xScaleTemp and yScaleTemp first, then calls updateData()—the line function will automatically use the updated scales when regenerating the path.
• Transition Control: Keep the .transition() call if you want smooth zoom animations; remove it only if you need instant updates.
• Line Function Reuse: Your existing line_gen function works perfectly here—no changes needed, since it references the dynamic scales that update during zoom.

内容的提问来源于stack exchange，提问作者lyric