再增加第二组路径数据

input-data/mock-path3.js

@@ -0,0 +1,10 @@
+const path1 =
+[12880,12894,13218,13219,13220,13234,13248,13249,13250,13251,13252,13253,13267,13281,13295,13637,13638,13639,13650,13651,13664,13665,13666,13667,13668,13681,13694,14064,14072,14073,14074,14083,14092,14093,14104,14117,14130,14144,14159,14174,14189,14549,14562,14576,14591,14609,14626,14643,14663,14683,14703,14723,14743,14763]
+
+const path2 = 
+[14763,14703,14643,14591,14549,14159,14117,14092,14073,13694,13667,13664,13639,13295,13253,13250,13234,13218]
+
+export {
+  path1,
+  path2
+}

src/App.vue

@@ -5,17 +5,26 @@
 
 <script>
 import * as d3 from "d3";
-import rawWholeData from "../input-data/data.js";
-import rawPathDataLandMark from "../input-data/mock-path.js";
+import rawWholeData from "../input-data/data3.js";
+import { path1 as rawPathDataIndex, path2 as rawPathDataIndex2 } from "../input-data/mock-path3.js";
 
+// 基于path index 拿到path节点数组
 let rawPathData = {
   data: [
   ]
 }
-for (let index = 0; index < rawPathDataLandMark.length; index++) {
-  const element = rawWholeData.data[rawPathDataLandMark[index]];
+for (let index = 0; index < rawPathDataIndex.length; index++) {
+  const element = rawWholeData.data[rawPathDataIndex[index]];
   rawPathData.data.push(element)
 }
+let rawPathData2 = {
+  data: [
+  ]
+}
+for (let index = 0; index < rawPathDataIndex2.length; index++) {
+  const element = rawWholeData.data[rawPathDataIndex2[index]];
+  rawPathData2.data.push(element)
+}
 
 // 原始数据处理成二维数组
 let wholeInputPointArray = rawWholeData.data.map((eachString) => {
@@ -24,6 +33,9 @@ let wholeInputPointArray = rawWholeData.data.map((eachString) => {
 let pathInputPointArray = rawPathData.data.map((eachString) => {
   return eachString.split(' ')
 })
+let pathInputPointArray2 = rawPathData2.data.map((eachString) => {
+  return eachString.split(' ')
+})
 
 // 所有点的分布情况
 let xArray = wholeInputPointArray.map((eachPoint) => {
@@ -35,6 +47,7 @@ let xCenter = (Math.max(...xArray) + Math.min(...xArray)) / 2
 let yArray = wholeInputPointArray.map((eachPoint) => {
   return eachPoint[1]
 })
+
 let yLength = Math.max(...yArray) - Math.min(...yArray)
 let yCenter = (Math.max(...yArray) + Math.min(...yArray)) / 2
 
@@ -71,6 +84,16 @@ let pathYArrayInPx = pathInputPointArray.map((eachPoint) => {
 }).map((eachY) => {
   return (eachY - yCenter) * pxPerUnitLength + viewportHeight / 2
 })
+let pathXArrayInPx2 = pathInputPointArray2.map((eachPoint) => {
+  return eachPoint[0]
+}).map((eachX) => {
+  return (eachX - xCenter) * pxPerUnitLength + viewportWidth / 2
+})
+let pathYArrayInPx2 = pathInputPointArray2.map((eachPoint) => {
+  return eachPoint[1]
+}).map((eachY) => {
+  return (eachY - yCenter) * pxPerUnitLength + viewportHeight / 2
+})
 
 // 组合成最终数据用来渲染
 let wholeDataForRender = []
@@ -81,6 +104,10 @@ let pathDataForRender = []
 for (let index = 0; index < pathInputPointArray.length; index++) {
   pathDataForRender.push([pathXArrayInPx[index], pathYArrayInPx[index], ...pathInputPointArray[index]])
 }
+let pathDataForRender2 = []
+for (let index = 0; index < pathInputPointArray2.length; index++) {
+  pathDataForRender2.push([pathXArrayInPx2[index], pathYArrayInPx2[index], ...pathInputPointArray2[index]])
+}
 
 export default {
   name: 'App',
@@ -126,7 +153,12 @@ export default {
         return d
       })
 
-
+    d3.select('svg').selectAll('text').data(pathDataForRender2).enter().append('text')
+      .text('1')
+      .attr('x', (d) => d[0])
+      .attr('y', (d) => d[1] + 0.36 * pxPerUnitLength / 2)
+      .attr('text-anchor', 'middle')
+      .attr('pointer-events', 'none')
   }
 }
 </script>