diff --git a/components/Tree/helper.ts b/components/Tree/helper.ts index 77478bc..632a409 100644 --- a/components/Tree/helper.ts +++ b/components/Tree/helper.ts @@ -3,6 +3,7 @@ interface TreeNode { id: number; name: string; + cut?: boolean; // Cut children children?: TreeNode[]; _children?: TreeNode[]; // Hidden children when collapsed collapsedCount?: number; // Count of collapsed children diff --git a/components/Tree/index.tsx b/components/Tree/index.tsx index d2825c2..ac30dca 100644 --- a/components/Tree/index.tsx +++ b/components/Tree/index.tsx @@ -71,8 +71,38 @@ export default function Tree({ data, nextComponent }: TreeProps) { .attr("y1", (d) => (d.source as d3.HierarchyPointNode).y) .attr("x2", (d) => (d.target as d3.HierarchyPointNode).x) .attr("y2", (d) => (d.target as d3.HierarchyPointNode).y) - .attr("stroke", "#e9bc39") + // .attr("stroke", "#e9bc39") + .attr("stroke", (d) => + d.source.data.cut || d.target.data.cut ? "#d4d4d4" : "#e9bc39", + ) // Set stroke to black if cut is true .attr("stroke-width", 3); + + // 暂时先用X + g.selectAll("text.cut-marker") + .data(links) + .enter() + .filter((d: any) => d.source.data.cut || d.target.data.cut) // Only add 'X' for cut links + .append("text") + .attr("class", "cut-marker") + .attr( + "x", + (d) => + ((d.source as d3.HierarchyPointNode).x + + (d.target as d3.HierarchyPointNode).x) / + 2, + ) + .attr( + "y", + (d) => + ((d.source as d3.HierarchyPointNode).y + + (d.target as d3.HierarchyPointNode).y) / + 2, + ) + .attr("text-anchor", "middle") + .attr("font-size", "14px") + .attr("fill", "red") + .text("X"); + // Create groups for each node const groups = g .selectAll("g")