|
|
@@ -221,7 +221,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
getWholeData() {
|
|
|
- if (!this.sceneNameOrUrl.trim() && process.env.NODE_ENV === 'production') {
|
|
|
+ if (!this.sceneNameOrUrl.trim()) {
|
|
|
window.alert('场景名或完整url必填！')
|
|
|
return
|
|
|
}
|
|
|
@@ -239,21 +239,16 @@ export default {
|
|
|
const that = this
|
|
|
getWholeData(this.sceneNameOrUrl).then((res) => {
|
|
|
rawWholeData = res
|
|
|
- // 原始字符串数组处理成二维数组
|
|
|
- let wholeInputPointArray = rawWholeData.map((eachString, index) => {
|
|
|
- console.assert(eachString.trim().split(' ').length === 12, `index ${index}处数据点 数字个数不是12！`)
|
|
|
- return eachString.trim().split(' ')
|
|
|
- })
|
|
|
|
|
|
// 所有点的分布情况
|
|
|
- let xArray = wholeInputPointArray.map((eachPoint) => {
|
|
|
- return eachPoint[0]
|
|
|
+ let xArray = rawWholeData.map((eachPoint) => {
|
|
|
+ return eachPoint.x
|
|
|
})
|
|
|
let xLength = Math.max(...xArray) - Math.min(...xArray)
|
|
|
xCenter = (Math.max(...xArray) + Math.min(...xArray)) / 2
|
|
|
|
|
|
- let yArray = wholeInputPointArray.map((eachPoint) => {
|
|
|
- return eachPoint[1]
|
|
|
+ let yArray = rawWholeData.map((eachPoint) => {
|
|
|
+ return eachPoint.y
|
|
|
})
|
|
|
let yLength = Math.max(...yArray) - Math.min(...yArray)
|
|
|
yCenter = (Math.max(...yArray) + Math.min(...yArray)) / 2
|
|
|
@@ -274,8 +269,9 @@ export default {
|
|
|
})
|
|
|
|
|
|
// 组合成最终数据用来渲染
|
|
|
- for (let index = 0; index < wholeInputPointArray.length; index++) {
|
|
|
- wholeDataForRender.push([wholeXArrayInPx[index], wholeYArrayInPx[index], ...wholeInputPointArray[index], index])
|
|
|
+ for (let index = 0; index < rawWholeData.length; index++) {
|
|
|
+ console.assert(rawWholeData[index].id === (index + 1), '数据点id和数据点在数组中的位置不相符！')
|
|
|
+ wholeDataForRender.push([wholeXArrayInPx[index], wholeYArrayInPx[index], JSON.stringify(rawWholeData[index]), rawWholeData[index].id])
|
|
|
}
|
|
|
|
|
|
gNode.selectAll('rect').data(wholeDataForRender).enter().append('rect')
|
|
|
@@ -290,8 +286,9 @@ export default {
|
|
|
|
|
|
gNode.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[renderDataItem.length - 1]}, \n具体值： ${renderDataItem.slice(2, 14).join(', ')}`
|
|
|
+ let renderDataItem = e.target.attributes['render-data'].value
|
|
|
+ let renderDataItemArray = renderDataItem.split(',')
|
|
|
+ that.infoText = `数据点id: ${renderDataItemArray[renderDataItemArray.length - 1]}, \n具体值： ${renderDataItem.match(/^[^{]+(\{.+\})[^}]+$/)[1]}`
|
|
|
}).on('mouseleave', function (e) {
|
|
|
d3.select(this).attr('fill', 'black')
|
|
|
that.infoText = ''
|
|
|
@@ -326,61 +323,51 @@ export default {
|
|
|
return
|
|
|
}
|
|
|
// 基于path index 拿到path节点数组
|
|
|
- let rawPathData = {
|
|
|
- data: [
|
|
|
- ]
|
|
|
- }
|
|
|
+ let rawPathData = []
|
|
|
for (let index = 0; index < rawPathDataIndex.length; index++) {
|
|
|
- const element = rawWholeData[rawPathDataIndex[index]];
|
|
|
- rawPathData.data.push(element)
|
|
|
- }
|
|
|
- let rawPathData2 = {
|
|
|
- data: [
|
|
|
- ]
|
|
|
+ const element = rawWholeData[rawPathDataIndex[index] - 1];
|
|
|
+ // 假设节点id和节点在数组中出现顺序相符
|
|
|
+ console.assert(element.id === rawPathDataIndex[index], '按照id寻找路径节点失败！')
|
|
|
+ rawPathData.push(element)
|
|
|
}
|
|
|
+ let rawPathData2 = []
|
|
|
for (let index = 0; index < rawPathDataIndex2.length; index++) {
|
|
|
- const element = rawWholeData[rawPathDataIndex2[index]];
|
|
|
- rawPathData2.data.push(element)
|
|
|
+ const element = rawWholeData[rawPathDataIndex2[index] - 1];
|
|
|
+ // 假设节点id和节点在数组中出现顺序相符
|
|
|
+ console.assert(element.id === rawPathDataIndex2[index], '按照id寻找路径节点失败！')
|
|
|
+ rawPathData2.push(element)
|
|
|
}
|
|
|
|
|
|
- // 原始字符串数组处理成二维数组
|
|
|
- let pathInputPointArray = rawPathData.data.map((eachString) => {
|
|
|
- return eachString.split(' ')
|
|
|
- })
|
|
|
- let pathInputPointArray2 = rawPathData2.data.map((eachString) => {
|
|
|
- return eachString.split(' ')
|
|
|
- })
|
|
|
-
|
|
|
// 各个点坐标映射到视口坐标
|
|
|
- let pathXArrayInPx = pathInputPointArray.map((eachPoint) => {
|
|
|
- return eachPoint[0]
|
|
|
+ let pathXArrayInPx = rawPathData.map((eachPoint) => {
|
|
|
+ return eachPoint.x
|
|
|
}).map((eachX) => {
|
|
|
return (eachX - xCenter) * pxPerUnitLength + svgWidth / 2
|
|
|
})
|
|
|
- let pathYArrayInPx = pathInputPointArray.map((eachPoint) => {
|
|
|
- return eachPoint[1]
|
|
|
+ let pathYArrayInPx = rawPathData.map((eachPoint) => {
|
|
|
+ return eachPoint.y
|
|
|
}).map((eachY) => {
|
|
|
return (eachY - yCenter) * pxPerUnitLength + svgHeight / 2
|
|
|
})
|
|
|
- let pathXArrayInPx2 = pathInputPointArray2.map((eachPoint) => {
|
|
|
- return eachPoint[0]
|
|
|
+ let pathXArrayInPx2 = rawPathData2.map((eachPoint) => {
|
|
|
+ return eachPoint.x
|
|
|
}).map((eachX) => {
|
|
|
return (eachX - xCenter) * pxPerUnitLength + svgWidth / 2
|
|
|
})
|
|
|
- let pathYArrayInPx2 = pathInputPointArray2.map((eachPoint) => {
|
|
|
- return eachPoint[1]
|
|
|
+ let pathYArrayInPx2 = rawPathData2.map((eachPoint) => {
|
|
|
+ return eachPoint.y
|
|
|
}).map((eachY) => {
|
|
|
return (eachY - yCenter) * pxPerUnitLength + svgHeight / 2
|
|
|
})
|
|
|
|
|
|
// 组合成最终数据用来渲染
|
|
|
let pathDataForRender = []
|
|
|
- for (let index = 0; index < pathInputPointArray.length; index++) {
|
|
|
- pathDataForRender.push([pathXArrayInPx[index], pathYArrayInPx[index], ...pathInputPointArray[index]])
|
|
|
+ for (let index = 0; index < rawPathData.length; index++) {
|
|
|
+ pathDataForRender.push([pathXArrayInPx[index], pathYArrayInPx[index]])
|
|
|
}
|
|
|
let pathDataForRender2 = []
|
|
|
- for (let index = 0; index < pathInputPointArray2.length; index++) {
|
|
|
- pathDataForRender2.push([pathXArrayInPx2[index], pathYArrayInPx2[index], ...pathInputPointArray2[index]])
|
|
|
+ for (let index = 0; index < rawPathData2.length; index++) {
|
|
|
+ pathDataForRender2.push([pathXArrayInPx2[index], pathYArrayInPx2[index]])
|
|
|
}
|
|
|
|
|
|
// 进行渲染
|
任一存