fix bugs

KidsXH · Jan 30, 2024 · 2c05100 · 2c05100
1 parent 6c628b8
commit 2c05100
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 46 deletions.
diff --git a/src/components/BranchView/index.tsx b/src/components/BranchView/index.tsx
@@ -382,34 +382,49 @@ export const BranchView = () => {
           // .ease(d3.easeLinear)
           .style("opacity", 1);
 
-        //render branch node text
         svg
           .append("g")
-          .selectAll("text")
+          .selectAll("switch")
           .data(rectData)
-          .join("text")
+          .join("switch")
+          .append("foreignObject")
+          .attr("x", (d) => d.x + 10)
+          .attr("y", (d, i) => d.y + textOffsetY - 22)
+          .attr("width", reasonBoxWidth - 10)
+          .attr("height", reasonBoxHeight)
           .attr("class", "branch-node-text select-none")
-          .attr("x", (d) => d.x + 15)
-          .attr("y", (d, i) => d.y + textOffsetY)
-          .attr("text-anchor", "start")
-          .attr("fill", "#000")
-          .attr("font-size", "14px")
-          .text((d) => {
-            const splitText = d.text.split(" ").slice(0, 3);
-            return d.text.length > 20
-              ? splitText[0] + " " + splitText[1] + " " + splitText[2]
-              : d.text;
-          })
-          // .style("opacity", (d, i) =>
-          //   (d.type === "parent" && direction) ||
-          //   (!direction && i === childIndex)
-          //     ? 1
-          //     : 0,
-          // )
-          // .transition()
-          // .duration(phase3)
-          // .ease(d3.easeLinear)
-          .style("opacity", 1);
+          .append("xhtml:body")
+          .style("font", "14px 'Helvetica Neue'")
+          .style("line-height", "1.2")
+          // .style("color", "#848484")
+          .style("overflow", "scroll")
+          .html(
+            (d) =>
+              "<p className='reason-p'>" +
+              (d.text.length > 80 ? d.text.slice(0, 80) + "..." : d.text) +
+              "</p>",
+            // "<p className='reason-p'>" + d.text + "</p>",
+          );
+
+        //render branch node text
+        // svg
+        //   .append("g")
+        //   .selectAll("text")
+        //   .data(rectData)
+        //   .join("text")
+        //   .attr("class", "branch-node-text select-none")
+        //   .attr("x", (d) => d.x + 15)
+        //   .attr("y", (d, i) => d.y + textOffsetY)
+        //   .attr("text-anchor", "start")
+        //   .attr("fill", "#000")
+        //   .attr("font-size", "14px")
+        //   .text((d) => {
+        //     const splitText = d.text.split(" ").slice(0, 3);
+        //     return d.text.length > 20
+        //       ? splitText[0] + " " + splitText[1] + " " + splitText[2]
+        //       : d.text;
+        //   })
+        //   .style("opacity", 1);
 
         //render code range
         svg
@@ -418,7 +433,7 @@ export const BranchView = () => {
           .data(rectData)
           .join("text")
           .attr("class", "code-range-text select-none")
-          .attr("x", (d) => d.x + codeRangeOffsetX)
+          .attr("x", (d) => d.x + codeRangeOffsetX - 5)
           .attr("y", (d, i) => d.y + codeRangeOffsetY)
           .attr("fill", "#000")
           .attr("font-size", "14px")
@@ -464,7 +479,6 @@ export const BranchView = () => {
         svg
           .append("g")
           .selectAll("switch")
-
           .data(reasonBoxData)
           .join("switch")
           .append("foreignObject")
@@ -490,13 +504,7 @@ export const BranchView = () => {
               "</p>",
             // "<p className='reason-p'>" + d.text + "</p>",
           )
-          // .append("title")
-          // .text((d) => d.text)
-          // .text((d) => d.text.slice(0, 20) + "...")
-          // .style("opacity", 0)
-          // .transition()
-          // .duration(phase3)
-          // .ease(d3.easeLinear)
+
           .style("opacity", 1);
       },
       phase1 + 2 * phase2,

diff --git a/src/components/ChainVis/index.tsx b/src/components/ChainVis/index.tsx
@@ -60,10 +60,10 @@ const ChainVis = () => {
   // const rectHeight = 34;
 
   const rectWidth = 120;
-  const rectHeight = 54;
+  const rectHeight = 60;
 
   const bigRectWidth = 120;
-  const bigRectHeight = 54;
+  const bigRectHeight = 60;
 
   const innerHeight = height - margin.top - margin.bottom;
   const interval =
@@ -231,21 +231,47 @@ const ChainVis = () => {
         setClickedNode(d.id);
       });
 
+    // svg
+    //   .append("g")
+    //   .selectAll("summary")
+    //   .data(rectData)
+    //   .join("text")
+    //   .attr("class", "chain-node-text select-none")
+    //   .attr("x", -45)
+    //   .attr("y", (d, i) => i * interval + 30)
+    //   .attr("text-anchor", "start")
+    //   .attr("fill", "#000")
+    //   .attr("font-size", "12px")
+    //   .text((d) => d.sum)
+    //   .on("click", function (event, d) {
+    //     setClickedNode(d.id);
+    //   });
+
     svg
       .append("g")
-      .selectAll("summary")
+      .selectAll("switch")
       .data(rectData)
-      .join("text")
+      .join("switch")
+      .append("foreignObject")
+      .attr("x", (d) => -45)
+      .attr("y", (d, i) =>
+        d.sum.length > 20 ? i * interval + 15 : i * interval + 20,
+      )
+      .attr("width", bigRectWidth)
+      .attr("height", bigRectHeight)
       .attr("class", "chain-node-text select-none")
-      .attr("x", -45)
-      .attr("y", (d, i) => i * interval + 30)
-      .attr("text-anchor", "start")
-      .attr("fill", "#000")
-      .attr("font-size", "12px")
-      .text((d) => d.sum)
-      .on("click", function (event, d) {
-        setClickedNode(d.id);
-      });
+      .append("xhtml:body")
+      .style("font", "12px 'Helvetica Neue'")
+      .style("line-height", "1.2")
+      // .style("color", "#848484")
+      .style("overflow", "scroll")
+      .html(
+        (d) =>
+          "<p className='reason-p'>" +
+          (d.sum.length > 35 ? d.sum.slice(0, 35) + "..." : d.sum) +
+          "</p>",
+        // "<p className='reason-p'>" + d.text + "</p>",
+      );
   }, [chainNodes]);
 
   //render connector