hover时页面显示信息

src/App.vue

@@ -3,7 +3,7 @@
  */
 
 <template>
-  info: {{infoTest}}
+  {{infoText}}
   <div class="svgWrapper"></div>
 </template>
 
@@ -63,12 +63,13 @@ export default {
     return {
       inputPointArray,
       colNum: 15,
-      infoText: 'adsf'
+      infoText: ''
     }
   },
   computed: {
   },
   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])
@@ -80,10 +81,10 @@ export default {
     d3.select('svg').selectAll('circle').on('mouseover', function(e) {
       d3.select(this).attr('fill', 'orange')
       let renderDataItem = e.target.attributes['render-data'].value.split(',')
-      console.log('数据点index(从0数起）：', renderDataItem[15])
-      console.log(`数据点各项值： ${renderDataItem[2]}, ${renderDataItem[3]}, ${renderDataItem[4]}, ${renderDataItem[5]}, ${renderDataItem[6]}, ${renderDataItem[7]}, ${renderDataItem[8]}, ${renderDataItem[9]}, ${renderDataItem[10]}, ${renderDataItem[11]}, ${renderDataItem[12]}, ${renderDataItem[13]}`);
+      that.infoText = `数据点index(从0数起）：${renderDataItem[15]}, \n具体值： ${renderDataItem.slice(2, 14).join(', ')}`
     }).on('mouseleave', function (e) {
       d3.select(this).attr('fill', 'black')
+      that.infoText = ''
     })
 
     // d3.select('svg').selectAll('text').data(dataForRender).enter().append('text').text((item) => {
@@ -103,4 +104,8 @@ export default {
   text-align: center;
   color: #2c3e50;
 }
+.svgWrapper {
+  position: absolute;
+  top: 20px;
+}
 </style>