|
|
@@ -1,15 +1,96 @@
|
|
|
+/**
|
|
|
+
|
|
|
+ */
|
|
|
+
|
|
|
<template>
|
|
|
- <img alt="Vue logo" src="./assets/logo.png">
|
|
|
- <HelloWorld msg="Welcome to Your Vue.js App"/>
|
|
|
+ info: {{infoTest}}
|
|
|
+ <div class="svgWrapper"></div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import HelloWorld from './components/HelloWorld.vue'
|
|
|
+import * as d3 from "d3";
|
|
|
+
|
|
|
+// 原始数据处理成二维数组
|
|
|
+import rawInputData from "../input-data/data.js";
|
|
|
+let inputPointArray = rawInputData.data.map((eachString) => {
|
|
|
+ return eachString.split(' ')
|
|
|
+})
|
|
|
+console.log('inputPointArray: ', inputPointArray);
|
|
|
+
|
|
|
+// 各个点的分布情况
|
|
|
+let xArray = inputPointArray.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) => {
|
|
|
+ return eachPoint[1]
|
|
|
+})
|
|
|
+let yLength = Math.max(...yArray) - Math.min(...yArray)
|
|
|
+let yCenter = (Math.max(...yArray) + Math.min(...yArray)) / 2
|
|
|
+
|
|
|
+let areaRatio = xLength / yLength
|
|
|
+
|
|
|
+// 视口尺寸
|
|
|
+let viewportWidth = document.documentElement.clientWidth
|
|
|
+let viewportHeight = document.documentElement.clientHeight
|
|
|
+let viewportRatio = viewportWidth / viewportHeight
|
|
|
+
|
|
|
+// 各个点坐标映射到视口坐标
|
|
|
+let pxPerUnitLength = 0 // 原始单位长度对应的像素数
|
|
|
+if (viewportRatio >= areaRatio) { // 视口高度应略小于y轴方向分布幅度
|
|
|
+ pxPerUnitLength = viewportHeight / yLength * 0.9
|
|
|
+} else { // 视口宽度应略小于x轴方向分布幅度
|
|
|
+ pxPerUnitLength = viewportWidth / xLength * 0.9
|
|
|
+}
|
|
|
+let xArrayInPx = xArray.map((eachX) => {
|
|
|
+ return (eachX - xCenter) * pxPerUnitLength + viewportWidth / 2
|
|
|
+})
|
|
|
+let yArrayInPx = yArray.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])
|
|
|
+}
|
|
|
|
|
|
export default {
|
|
|
name: 'App',
|
|
|
- components: {
|
|
|
- HelloWorld
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ inputPointArray,
|
|
|
+ colNum: 15,
|
|
|
+ infoText: 'adsf'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ 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)
|
|
|
+ .attr('render-data', (d) => {
|
|
|
+ return d
|
|
|
+ })
|
|
|
+ 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]}`);
|
|
|
+ }).on('mouseleave', function (e) {
|
|
|
+ d3.select(this).attr('fill', 'black')
|
|
|
+ })
|
|
|
+
|
|
|
+ // 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])
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -21,6 +102,5 @@ export default {
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
text-align: center;
|
|
|
color: #2c3e50;
|
|
|
- margin-top: 60px;
|
|
|
}
|
|
|
</style>
|
任一存