From 94896f455f0e30e1686a67e47cb2047a9e84d0c0 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Fri, 18 Mar 2022 15:33:27 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BC=98=E5=8C=96=E5=85=B3?= =?UTF-8?q?=E7=B3=BB=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/chart/chart/chartTopology.vue | 74 ++++++++++++------- .../src/components/chart/panelChart.vue | 4 + 2 files changed, 50 insertions(+), 28 deletions(-) diff --git a/nezha-fronted/src/components/chart/chart/chartTopology.vue b/nezha-fronted/src/components/chart/chart/chartTopology.vue index bf9362520..20fbb4dd0 100644 --- a/nezha-fronted/src/components/chart/chart/chartTopology.vue +++ b/nezha-fronted/src/components/chart/chart/chartTopology.vue @@ -21,6 +21,12 @@ import '@svgdotjs/svg.panzoom.js' export default { name: 'chartHexagonD3', mixins: [chartMixin, chartFormat], + props: { + parentId: { + type: String, + default: 'asset-1' + } + }, data () { return { timer: null, @@ -41,7 +47,8 @@ export default { data: { nodes: [], links: [] - } + }, + firstInit: true } }, methods: { @@ -53,10 +60,11 @@ export default { this.data.nodes.push(...this.chartData[0].nodes) setTimeout(() => { const dom = document.getElementById(`chart-canvas-${this.chartId}`) - console.log(dom, `chart-canvas-${this.chartId}`) dom.append(this.ForceGraph({ nodes: this.data.nodes, links: this.data.links }, { width: dom.offsetWidth, - height: dom.offsetHeight + height: dom.offsetHeight, + nodeStrength: -500, + distanceNum: 200 })) const svg = document.getElementById('svgHex' + this.chartId) svg.setAttribute('width', '100%') @@ -86,12 +94,12 @@ export default { linkStrokeWidth = 1.5, // given d in links, returns a stroke width in pixels linkStrokeLinecap = 'round', // link stroke linecap linkStrength, + distanceNum, colors = d3.schemeTableau10, // an array of color strings, for the node groups width = 640, // outer width, in pixels height = 400, // outer height, in pixels invalidation // when this promise resolves, stop the simulation } = {}) { - console.log(nodes, nodeId) const self = this // Compute values. const N = d3.map(nodes, nodeId).map(intern) @@ -116,7 +124,8 @@ export default { // Construct the forces. const forceNode = d3.forceManyBody() const forceLink = d3.forceLink(links).id(({ index: i }) => N[i]) - // if (nodeStrength !== undefined) forceNode.strength(nodeStrength) + if (nodeStrength !== undefined) forceNode.strength(nodeStrength) + if (distanceNum !== undefined) forceLink.distance(distanceNum) const simulation = d3.forceSimulation(nodes) .force('link', forceLink) .force('charge', forceNode) @@ -126,7 +135,7 @@ export default { .attr('id', 'svgHex' + this.chartId) .attr('width', width) .attr('height', height) - .attr('viewBox', [-width/2, -height/2, width, height]) + .attr('viewBox', [-width / 2, -height / 2, width, height]) .attr('style', 'max-width: 100%; height: 100%;') const link = svg.append('g') @@ -169,6 +178,12 @@ export default { node .attr('transform', function (d) { + if (d.id === self.parentId && self.firstInit) { + d.fx = 0 + d.fy = 0 + d.x = 0 + d.y = 0 + } return 'translate(' + d.x + ',' + d.y + ')' }) } @@ -207,7 +222,6 @@ export default { console.log(d, 'nodeMouseout') } function showChildren (event, d) { - console.log(d) if (d.hasChildren) { hideChildren(d) return @@ -265,9 +279,10 @@ export default { if (!item.parentId) { item.parentId = parentId } + item.radius = 20 // 需要计算 分三级 + item.color = '#fa9' // 需要计算 分三级 }) nodes.push(...res.data.nodes) - console.log(nodes) simulation.stop() node = node .data(nodes) @@ -289,9 +304,6 @@ export default { }) links.push(...reslinks) links = links.map(d => Object.assign({}, d)) - console.log( - links - ) linkCopy = linkCopy .data(links) .join('line') @@ -301,7 +313,6 @@ export default { }) } function hideChildren (d) { - console.log(d) if (d.id) { d.hasChildren = false simulation.stop() @@ -330,32 +341,36 @@ export default { } function render () { node.append('circle') - .attr('r', nodeRadius) + .attr('r', function (d) { return d.radius }) + .attr('fill', function (d) { return d.color }) const bottomBox = node.append('rect') - .attr('width', nodeRadius * 2 + 20 + 'px') - .attr('height', '6px') - .attr('x', nodeRadius * -2 - 5) - .attr('y', 5) + .attr('width', nodeRadius * 2 + 40 + 'px') + .attr('height', '22px') + .attr('x', nodeRadius * -1 - 20) + .attr('y', nodeRadius * 1 + 5) .attr('style', 'cursor:pointer') .attr('class', function (d) { return d.hasChildren ? 'toggle-nodes' : 'hide' }) - .style('fill', '#000') + .style('fill', '#fff') + .attr('stroke', '#999') + .attr('stroke-width', 1) node.append('text') - .attr('x', nodeRadius * -2 - 5) - .attr('y', 5) + .attr('width', nodeRadius * 2 + 20 + 'px') + .attr('height', '16px') + .attr('x', nodeRadius * -1 - 16) + .attr('y', nodeRadius * 1 + 5 + 16) .text(function (d) { - console.log(d, 'asdasd') return d.name }) - .attr('font-size', 5) - .attr('fill', '#fa9812') - // .attr('stroke', '#fa9812') + .attr('font-size', 16) + .attr('stroke', '#fa9812') + .attr('stroke-width', 1) // .attr('width', nodeRadius * 2 + 10 + 'px') // .attr('height', '5px') node.append('svg') // no i18n - .attr('width', '6px')// No i18n - .attr('height', '6px')// No i18n - .attr('x', 7)// No i18n - .attr('y', 5)// No i18n + .attr('width', '16px')// No i18n + .attr('height', '16px')// No i18n + .attr('x', nodeRadius * 1)// No i18n + .attr('y', nodeRadius * 1 + 8)// No i18n .attr('style', 'cursor:pointer')// No i18n .attr('class', function (d) { return d.hasChildren ? 'toggle-nodes' : 'hide' })// No i18n .attr('viewBox', '0 0 512 512').append('polygon') @@ -369,6 +384,9 @@ export default { }) node.attr('fixed', false) } + setTimeout(()=>{ + self.firstInit = false + }, 1000) return Object.assign(svg.node(), { scales: { color } }) }, update (nodes, links) { diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue index 55c4666e4..45423c6da 100644 --- a/nezha-fronted/src/components/chart/panelChart.vue +++ b/nezha-fronted/src/components/chart/panelChart.vue @@ -459,10 +459,14 @@ export default { res.data.nodes.forEach(item => { if (item.id === parentId) { item.hasChildren = true + item.fx = 0 + item.fy = 0 } else { item.hasChildren = false } item.parentId = parentId + item.radius = 20 // 需要计算 分三级 + item.color = '#fa9' // 需要计算 分三级 }) this.chartData = [res.data] })