如何将GetOrgChart二级父节点关系线条改为其他linkType样式？

Hey there! Great question—customizing the secondary parent link style to avoid overlapping with other nodes is totally achievable in GetOrgChart. Here's a step-by-step breakdown to tweak those links into the "M" or "B" curved patterns you need:

• Target Secondary Parent Links with Custom Rendering
  GetOrgChart provides the linkTemplate configuration hook, which lets you override how specific link types are drawn. We’ll use this to target secondary parent links and replace their default straight lines with curved paths that绕开其他节点.

• Code Snippet for "M" Style Links
  Here’s a working example that generates an upward-curving "M" shape (adjust values to match your chart’s node sizing and spacing):

  var chart = new getOrgChart(document.getElementById("tree"), {
    // Your existing chart configuration (nodes, data, etc.) goes here
    linkTemplate: function(data, type) {
      // Check if we're dealing with a secondary parent link
      if (type === "secondaryParent") {
        // Calculate key coordinates for the link path
        var fromCenterX = data.from.x + data.from.width / 2;
        var fromTopY = data.from.y;
        var toCenterX = data.to.x + data.to.width / 2;
        var toBottomY = data.to.y + data.to.height;
        
        // Define curve depth (adjust this to control how far the link curves away from nodes)
        var curveOffset = 60;
        var midpointX = (fromCenterX + toCenterX) / 2;
  
        // Return SVG path for the "M" shaped link
        return `M ${fromCenterX} ${fromTopY} C ${midpointX} ${fromTopY - curveOffset}, ${midpointX} ${toBottomY + curveOffset}, ${toCenterX} ${toBottomY}`;
      }
      // Fall back to default rendering for all other link types
      return getOrgChart.linkTemplates[type](data);
    }
  });
  

• Modify for "B" Style Links
  If you want a downward-curving "B" shape instead, just flip the curve offset directions in the path:

  return `M ${fromCenterX} ${fromTopY} C ${midpointX} ${fromTopY + curveOffset}, ${midpointX} ${toBottomY - curveOffset}, ${toCenterX} ${toBottomY}`;
  

• Fine-Tune the Curve
  Play around with the curveOffset value to adjust how much the link deviates from the straight line. Larger values will create more space between the link and nearby nodes, while smaller values keep the curve subtle. Test with your actual node layout to get the perfect fit.

内容的提问来源于stack exchange，提问作者fls-pcate