From 5053820860db28dc2eb1e4551c48cb281be53da6 Mon Sep 17 00:00:00 2001 From: Fine Date: Fri, 19 Aug 2022 15:47:00 +0800 Subject: [PATCH] svg zoom --- src/views/dashboard/data.ts | 2 +- .../Graph => components/utils}/zoom.ts | 15 ++++--- .../components/ProcessTopology.vue | 44 +++++++++++++------ .../related/topology/components/Graph.vue | 4 +- .../related/topology/components/utils/zoom.ts | 28 ------------ 5 files changed, 42 insertions(+), 51 deletions(-) rename src/views/dashboard/related/{network-profiling/components/Graph => components/utils}/zoom.ts (76%) delete mode 100644 src/views/dashboard/related/topology/components/utils/zoom.ts diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index 61b08eab..e79af1c0 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -15,7 +15,7 @@ * limitations under the License. */ export const dragIgnoreFrom = - "svg.d3-trace-tree, .dragger, .micro-topo-chart, .schedules, .vis-item, .vis-timeline"; + "svg.d3-trace-tree, .dragger, .micro-topo-chart, .schedules, .vis-item, .vis-timeline, .process-svg"; export const PodsChartTypes = ["EndpointList", "InstanceList"]; diff --git a/src/views/dashboard/related/network-profiling/components/Graph/zoom.ts b/src/views/dashboard/related/components/utils/zoom.ts similarity index 76% rename from src/views/dashboard/related/network-profiling/components/Graph/zoom.ts rename to src/views/dashboard/related/components/utils/zoom.ts index 70576dda..9227089c 100644 --- a/src/views/dashboard/related/network-profiling/components/Graph/zoom.ts +++ b/src/views/dashboard/related/components/utils/zoom.ts @@ -15,14 +15,15 @@ * limitations under the License. */ -export default (d3: any, graph: any) => +export default (d3: any, graph: any, diff: number[]) => d3 .zoom() .scaleExtent([0.3, 10]) - .on("zoom", (d: any) => { - graph - .attr("transform", d3.zoomTransform(graph.node())) - .attr( - `translate(${d.transform.x},${d.transform.y})scale(${d.transform.k})` - ); + .on("zoom", (event: any) => { + graph.attr( + "transform", + `translate(${event.transform.x + diff[0]},${ + event.transform.y + diff[1] + })scale(${event.transform.k})` + ); }); diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue index 26b782fd..73bb60ac 100644 --- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue +++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue @@ -40,7 +40,7 @@ import d3tip from "d3-tip"; import { linkElement, anchorElement, arrowMarker } from "./Graph/linkProcess"; import nodeElement from "./Graph/nodeProcess"; import { Call } from "@/types/topology"; -// import zoom from "../../components/D3Graph/zoom"; +import zoom from "../../components/utils/zoom"; import { ProcessNode } from "@/types/ebpf"; import { useThrottleFn } from "@vueuse/core"; import Settings from "./Settings.vue"; @@ -108,7 +108,7 @@ function drawGraph() { link.value = graph.value.append("g").selectAll(".topo-call"); anchor.value = graph.value.append("g").selectAll(".topo-line-anchor"); arrow.value = graph.value.append("g").selectAll(".topo-line-arrow"); - // svg.value.call(zoom(d3, graph.value)); + svg.value.call(zoom(d3, graph.value, [220, 200])); svg.value.on("click", (event: any) => { event.stopPropagation(); event.preventDefault(); @@ -123,11 +123,9 @@ function hexGrid(n = 1, radius = 1, origin = [0, 0]) { let x, y, yn, p; const gLayout = new Layout(radius, origin); const pos = []; - // x = -1; n = 1.5 for (x = -n; x <= n; x++) { y = Math.max(-n, -x - n); // 0 yn = Math.min(n, -x + n); // 1 - // y = 0 yn = 1 for (y; y <= yn; y++) { p = gLayout.axialToPixel(x, y); pos.push(p); @@ -149,6 +147,13 @@ function createPolygon(radius: number, sides = 6, offset = 0) { return poly; } +function getArcPoint(angle: number, radius: number) { + const origin = [0, 0]; + const x1 = radius + origin[0] * Math.cos((angle * Math.PI) / 180); + const y1 = origin[1] + radius * Math.sin((angle * Math.PI) / 180); + + return [x1, y1]; +} function createLayout() { if (!node.value || !link.value) { return; @@ -239,22 +244,35 @@ function createLayout() { // .attr("stroke-width", 1) // .style("fill", "none"); // } - const pos = hexGrid(p.count, 68, origin); // cube centers let cubes = count > 7 ? cubeCenters : centers; - drawTopology(cubes); -} - -function drawTopology(cubes: number[][]) { - const nodeArr = networkProfilingStore.nodes.filter( - (d: ProcessNode) => d.serviceInstanceId === selectorStore.currentPod.id - ); - const count = nodeArr.length; for (let v = 0; v < count; v++) { const x = cubes[v][0]; const y = cubes[v][1]; nodeArr[v].x = x; nodeArr[v].y = y; } + const outNodes = networkProfilingStore.nodes.filter( + (d: ProcessNode) => d.serviceInstanceId !== selectorStore.currentPod.id + ); + let angle = 10; + let r = 230; + for (let v = 0; v < outNodes.length; v++) { + const pos = getArcPoint(angle, r); // angle is [-120, 120] + outNodes[v].x = pos[0]; + outNodes[v].y = pos[1]; + angle = angle + 10; + if (angle * (v + 1) > 120) { + angle = -10; + } + if (angle * (v + 1) < -120) { + r = r + 20; + angle = 10; + } + } + drawTopology([...nodeArr, ...outNodes]); +} + +function drawTopology(nodeArr: any[]) { node.value = node.value.data(nodeArr, (d: ProcessNode) => d.id); node.value.exit().remove(); node.value = nodeElement( diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue index 83a6b65d..6a319b53 100644 --- a/src/views/dashboard/related/topology/components/Graph.vue +++ b/src/views/dashboard/related/topology/components/Graph.vue @@ -94,7 +94,7 @@ import { import { useI18n } from "vue-i18n"; import * as d3 from "d3"; import d3tip from "d3-tip"; -import zoom from "./utils/zoom"; +import zoom from "../../components/utils/zoom"; import { simulationInit, simulationSkip } from "./utils/simulation"; import nodeElement from "./utils/nodeElement"; import { linkElement, anchorElement, arrowMarker } from "./utils/linkElement"; @@ -193,7 +193,7 @@ async function init() { link.value = graph.value.append("g").selectAll(".topo-line"); anchor.value = graph.value.append("g").selectAll(".topo-line-anchor"); arrow.value = graph.value.append("g").selectAll(".topo-line-arrow"); - svg.value.call(zoom(d3, graph.value)); + svg.value.call(zoom(d3, graph.value, [-100, -100])); svg.value.on("click", (event: any) => { event.stopPropagation(); event.preventDefault(); diff --git a/src/views/dashboard/related/topology/components/utils/zoom.ts b/src/views/dashboard/related/topology/components/utils/zoom.ts deleted file mode 100644 index 70576dda..00000000 --- a/src/views/dashboard/related/topology/components/utils/zoom.ts +++ /dev/null @@ -1,28 +0,0 @@ -/** - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export default (d3: any, graph: any) => - d3 - .zoom() - .scaleExtent([0.3, 10]) - .on("zoom", (d: any) => { - graph - .attr("transform", d3.zoomTransform(graph.node())) - .attr( - `translate(${d.transform.x},${d.transform.y})scale(${d.transform.k})` - ); - });