假设路径节点以和全部节点同样的格式给定，画出路径节点。

src/App.vue

@@ -1,7 +1,3 @@
-/**
-
- */
-
 <template>
   {{infoText}}
   <div class="svgWrapper"></div>
@@ -9,22 +5,25 @@
 
 <script>
 import * as d3 from "d3";
+import rawWholeData from "../input-data/data.js";
+import rawPathData from "../input-data/mock-path.js";
 
 // 原始数据处理成二维数组
-import rawInputData from "../input-data/data.js";
-let inputPointArray = rawInputData.data.map((eachString) => {
+let wholeInputPointArray = rawWholeData.data.map((eachString) => {
+  return eachString.split(' ')
+})
+let pathInputPointArray = rawPathData.data.map((eachString) => {
   return eachString.split(' ')
 })
-console.log('inputPointArray: ', inputPointArray);
 
-// 各个点的分布情况
-let xArray = inputPointArray.map((eachPoint) => {
+// 所有点的分布情况
+let xArray = wholeInputPointArray.map((eachPoint) => {
   return eachPoint[0]
 })
 let xLength = Math.max(...xArray) - Math.min(...xArray)
 let xCenter = (Math.max(...xArray) + Math.min(...xArray)) / 2
 
-let yArray = inputPointArray.map((eachPoint) => {
+let yArray = wholeInputPointArray.map((eachPoint) => {
   return eachPoint[1]
 })
 let yLength = Math.max(...yArray) - Math.min(...yArray)
@@ -44,24 +43,38 @@ if (viewportRatio >= areaRatio) { // 视口高度应略小于y轴方向分布幅
 } else { // 视口宽度应略小于x轴方向分布幅度
   pxPerUnitLength = viewportWidth / xLength * 0.9
 }
-let xArrayInPx = xArray.map((eachX) => {
+let wholeXArrayInPx = xArray.map((eachX) => {
+  return (eachX - xCenter) * pxPerUnitLength + viewportWidth / 2
+})
+let wholeYArrayInPx = yArray.map((eachY) => {
+  return (eachY - yCenter) * pxPerUnitLength + viewportHeight / 2
+})
+let pathXArrayInPx = pathInputPointArray.map((eachPoint) => {
+  return eachPoint[0]
+}).map((eachX) => {
   return (eachX - xCenter) * pxPerUnitLength + viewportWidth / 2
 })
-let yArrayInPx = yArray.map((eachY) => {
+let pathYArrayInPx = pathInputPointArray.map((eachPoint) => {
+  return eachPoint[1]
+}).map((eachY) => {
   return (eachY - yCenter) * pxPerUnitLength + viewportHeight / 2
 })
 
 // 组合成最终数据用来渲染
-let dataForRender = []
-for (let index = 0; index < xArrayInPx.length; index++) {
-  dataForRender.push([xArrayInPx[index], yArrayInPx[index], ...inputPointArray[index], index])
+let wholeDataForRender = []
+for (let index = 0; index < wholeInputPointArray.length; index++) {
+  wholeDataForRender.push([wholeXArrayInPx[index], wholeYArrayInPx[index], ...wholeInputPointArray[index], index])
+}
+let pathDataForRender = []
+for (let index = 0; index < pathInputPointArray.length; index++) {
+  pathDataForRender.push([pathXArrayInPx[index], pathYArrayInPx[index], ...pathInputPointArray[index]])
 }
 
 export default {
   name: 'App',
   data() {
     return {
-      inputPointArray,
+      wholeInputPointArray,
       colNum: 15,
       infoText: ''
     }
@@ -71,14 +84,18 @@ export default {
   mounted() {
     const that = this
     d3.select('.svgWrapper').append("svg").attr("width", document.documentElement.clientWidth).attr('height', document.documentElement.clientHeight)
-    d3.select('svg').selectAll('circle').data(dataForRender).enter().append('circle')
-      .attr('cx', (d) => d[0])
-      .attr('cy', (d) => d[1])
-      .attr('r', 0.36 * pxPerUnitLength / 2)
+
+    d3.select('svg').selectAll('rect').data(wholeDataForRender).enter().append('rect')
+      .attr('x', (d) => d[0] - 0.36 * pxPerUnitLength / 2)
+      .attr('y', (d) => d[1] - 0.36 * pxPerUnitLength / 2)
+      .attr('width', 0.36 * pxPerUnitLength)
+      .attr('height', 0.36 * pxPerUnitLength)
+      .attr('fill', 'black')
       .attr('render-data', (d) => {
         return d
       })
-    d3.select('svg').selectAll('circle').on('mouseover', function(e) {
+
+    d3.select('svg').selectAll('rect').on('mouseover', function(e) {
       d3.select(this).attr('fill', 'orange')
       let renderDataItem = e.target.attributes['render-data'].value.split(',')
       that.infoText = `数据点index(从0数起）：${renderDataItem[15]}, \n具体值： ${renderDataItem.slice(2, 14).join(', ')}`
@@ -87,11 +104,17 @@ export default {
       that.infoText = ''
     })
 
-    // d3.select('svg').selectAll('text').data(dataForRender).enter().append('text').text((item) => {
-    //   return item[item.length - 1]
-    // })
-    //   .attr('x', (item) => item[0])
-    //   .attr('y', (item) => item[1])
+    d3.select('svg').selectAll('circle').data(pathDataForRender).enter().append('circle')
+      .attr('cx', (d) => d[0])
+      .attr('cy', (d) => d[1])
+      .attr('r', 0.36 * pxPerUnitLength / 2)
+      .attr('fill', 'blue')
+      .attr('pointer-events', 'none')
+      .attr('render-data', (d) => {
+        return d
+      })
+
+
   }
 }
 </script>