update layout

This commit is contained in:
Fine 2022-08-19 10:22:01 +08:00
parent bba6d9db10
commit 0fcc3e3b52
2 changed files with 36 additions and 15 deletions

View File

@ -20,7 +20,7 @@ export const linkElement = (graph: any) => {
.append("path") .append("path")
.attr("class", "topo-call") .attr("class", "topo-call")
.attr("marker-end", "url(#arrow)") .attr("marker-end", "url(#arrow)")
.attr("stroke", "#bbb") .attr("stroke", "#97B0F8")
.attr("d", (d: any) => { .attr("d", (d: any) => {
const controlPos = computeControlPoint( const controlPos = computeControlPoint(
[d.source.x, d.source.y - 5], [d.source.x, d.source.y - 5],
@ -50,7 +50,7 @@ export const anchorElement = (graph: any, funcs: any, tip: any) => {
.append("circle") .append("circle")
.attr("class", "topo-line-anchor") .attr("class", "topo-line-anchor")
.attr("r", 5) .attr("r", 5)
.attr("fill", "#ccc") .attr("fill", "#97B0F8")
.attr("transform", (d: any) => { .attr("transform", (d: any) => {
const controlPos = computeControlPoint( const controlPos = computeControlPoint(
[d.source.x, d.source.y - 5], [d.source.x, d.source.y - 5],
@ -91,7 +91,7 @@ export const arrowMarker = (graph: any) => {
.attr("orient", "auto"); .attr("orient", "auto");
const arrowPath = "M2,2 L10,6 L2,10 L6,6 L2,2"; const arrowPath = "M2,2 L10,6 L2,10 L6,6 L2,2";
arrow.append("path").attr("d", arrowPath).attr("fill", "#bbb"); arrow.append("path").attr("d", arrowPath).attr("fill", "#97B0F8");
return arrow; return arrow;
}; };
// Control Point coordinates of quadratic Bezier curve // Control Point coordinates of quadratic Bezier curve

View File

@ -87,7 +87,7 @@ async function init() {
return; return;
} }
drawGraph(); drawGraph();
drawTopology(); createLayout();
} }
function drawGraph() { function drawGraph() {
@ -102,7 +102,7 @@ function drawGraph() {
graph.value = svg.value graph.value = svg.value
.append("g") .append("g")
.attr("class", "svg-graph") .attr("class", "svg-graph")
.attr("transform", `translate(${dom.width / 3}, ${dom.width / 3})`); .attr("transform", `translate(220, 200)`);
graph.value.call(tip.value); graph.value.call(tip.value);
node.value = graph.value.append("g").selectAll(".topo-node"); node.value = graph.value.append("g").selectAll(".topo-node");
link.value = graph.value.append("g").selectAll(".topo-call"); link.value = graph.value.append("g").selectAll(".topo-call");
@ -149,7 +149,7 @@ function createPolygon(radius: number, sides = 6, offset = 0) {
return poly; return poly;
} }
function drawTopology() { function createLayout() {
if (!node.value || !link.value) { if (!node.value || !link.value) {
return; return;
} }
@ -162,7 +162,7 @@ function drawTopology() {
} }
const p = { const p = {
count: 1, count: 1,
radius: parseInt(dom.width / 3), // layout hexagons radius 300 radius: 210, // layout hexagons radius 300
}; };
const polygon = createPolygon(p.radius, 6, 0); const polygon = createPolygon(p.radius, 6, 0);
const origin = [0, 0]; const origin = [0, 0];
@ -172,22 +172,30 @@ function drawTopology() {
} }
const linePath = d3.line(); const linePath = d3.line();
linePath.curve(d3.curveLinearClosed); linePath.curve(d3.curveLinearClosed);
graph.value const hexPolygon = graph.value.append("g");
hexPolygon
.append("path") .append("path")
.attr("d", linePath(vertices)) .attr("d", linePath(vertices))
.attr("stroke", "#ccc") .attr("stroke", "#D5DDF6")
.attr("stroke-width", 2) .attr("stroke-width", 2)
.style("fill", "none"); .style("fill", "none");
hexPolygon
.append("text")
.attr("fill", "#000")
.attr("text-anchor", "middle")
.attr("x", 0)
.attr("y", p.radius)
.text(() => selectorStore.currentPod.label);
const nodeArr = networkProfilingStore.nodes.filter( const nodeArr = networkProfilingStore.nodes.filter(
(d: ProcessNode) => d.serviceInstanceId === selectorStore.currentPod.id (d: ProcessNode) => d.serviceInstanceId === selectorStore.currentPod.id
); );
const count = nodeArr.length; const count = nodeArr.length;
// layout // layout
const centers = hexGrid(p.count, parseInt(dom.width / 9), origin); // cube centers radius 100 const centers = hexGrid(p.count, 68, origin); // cube centers
const cubeCenters = []; const cubeCenters = [];
if (count > 7) { if (count > 7) {
for (let i = 0; i < centers.length; i++) { for (let i = 0; i < centers.length; i++) {
// const polygon = createPolygon(100, 6, 0); // const polygon = createPolygon(68, 6, 0);
// const vertices: any = []; // a hexagon vertices // const vertices: any = []; // a hexagon vertices
// for (let v = 0; v < polygon.length; v++) { // for (let v = 0; v < polygon.length; v++) {
// vertices.push([ // vertices.push([
@ -203,13 +211,18 @@ function drawTopology() {
// .attr("stroke", "#ccc") // .attr("stroke", "#ccc")
// .attr("stroke-width", 1) // .attr("stroke-width", 1)
// .style("fill", "none"); // .style("fill", "none");
const c = hexGrid(p.count, parseInt(dom.width / 27) - 5, centers[i]); let c = hexGrid(1, 20, centers[i]);
if (count < 15) {
c = [c[0], c[5]];
} else if (count < 22) {
c = [c[0], c[2], c[5]];
}
cubeCenters.push(...c); cubeCenters.push(...c);
} }
shuffleArray(cubeCenters); shuffleArray(cubeCenters);
} }
// for (let i = 0; i < cubeCenters.length; i++) { // for (let i = 0; i < cubeCenters.length; i++) {
// const polygon = createPolygon(30, 6, 0); // const polygon = createPolygon(20, 6, 0);
// const vertices: any = []; // a hexagon vertices // const vertices: any = []; // a hexagon vertices
// for (let v = 0; v < polygon.length; v++) { // for (let v = 0; v < polygon.length; v++) {
// vertices.push([ // vertices.push([
@ -226,8 +239,16 @@ function drawTopology() {
// .attr("stroke-width", 1) // .attr("stroke-width", 1)
// .style("fill", "none"); // .style("fill", "none");
// } // }
// const pos = hexGrid(p.count, 30, [p.radius * 2 + 20]); // cube centers const pos = hexGrid(p.count, 68, origin); // cube centers
let cubes = count > 7 ? cubeCenters : 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++) { for (let v = 0; v < count; v++) {
const x = cubes[v][0]; const x = cubes[v][0];
const y = cubes[v][1]; const y = cubes[v][1];
@ -355,7 +376,7 @@ async function freshNodes() {
return; return;
} }
drawGraph(); drawGraph();
drawTopology(); createLayout();
} }
watch( watch(
() => networkProfilingStore.nodes, () => networkProfilingStore.nodes,