IssueHunt为什么我做高亮曲线会会有阴影 #4955
976181987 posted onGitHub
问题描述
我做自定义高亮是按官网的例子操作的，但是我触发高亮时，边会出现意外的阴影，
重现链接
无
重现步骤
<template> <div class="bg" ref="g6Ref" @click="clearAllStats"></div> </template>
<script setup>
// @ is an alias to /src
import {
onMounted,
inject,
ref,
shallowRef,
onBeforeUnmount,
watch,
} from "vue";
import G6 from "@antv/g6";
import circleRed2 from "./img/circle-red-2.png";
import circleGreen2 from "./img/circle-green-2.png";
import circleYellow2 from "./img/circle-yellow-2.png";
import rectRed2 from "./img/rect-red-2.png";
import rectGreen2 from "./img/rect-green-2.png";
import rectYellow2 from "./img/rect-yellow-2.png";
import circleRed3 from "./img/circle-red-3.png";
import circleGreen3 from "./img/circle-green-3.png";
import circleYellow3 from "./img/circle-yellow-3.png";
import cloud from "./img/cloud.png";
const resizeView = inject("resizeView");
const g6Ref = ref();
const menu = new G6.Menu({
offsetX: 6,
offsetX: 10,
itemTypes: ["node"],
getContent(e) {
console.log(e);
const outDiv = document.createElement("div");
// outDiv.style.width = '180px';
outDiv.innerHTML = <ul>
<li class='cursor' data-index='1'>影响分析</li>
<li class='cursor' data-index='2'>原因分析</li>
<li class='cursor' data-index='3'>协同分析</li>
</ul>;
return outDiv;
},
handleMenuClick(target, item) {
console.log(target.attributes[0].nodeValue, item);
},
});
const g6Graph = shallowRef();
const init = () => {
const width = g6Ref.value.scrollWidth;
const height = g6Ref.value.scrollHeight || 500;
g6Graph.value = new G6.Graph({
container: g6Ref.value,
width,
height,
plugins: [menu],
fitViewPadding: 20,
layout: {
type: "force",
// edgeStrength: 20, //边的作用力
preventOverlap: true, //是否防止重叠
nodeSize: 100,
// linkDistance: 10,
// edgeStrength: 0.7,
},
modes: {
default: [
"drag-canvas",
// "drag-node",
// "activate-relations",
// "scroll-canvas",
],
},
defaultNode: {
// type: "icon-marker",
size: [30, 30],
fill: "#9254de",
position: "bottom",
// label: "123",
style: {
lineWidth: 2,
fill: "#B0DDC1",
},
},
defaultEdge: {
type: "cubic",
// type: "cubic-horizontal",
// size: 1,
style: {
lineAppendWidth: 2,
lineDash: [5],
},
},
nodeStateStyles: {
highlight: {
opacity: 0.2,
},
dark: {
opacity: 1,
},
},
edgeStateStyles: {
highlight: {
// stroke: "#999",
},
dark: {
stroke: "#999",
},
},
});
function clearAllStats(e) {
g6Graph.value.setAutoPaint(false);
g6Graph.value.getNodes().forEach(function (node) {
g6Graph.value.clearItemStates(node);
});
g6Graph.value.getEdges().forEach(function (edge) {
g6Graph.value.clearItemStates(edge);
});
g6Graph.value.paint();
g6Graph.value.setAutoPaint(true);
}
function findNodePath(tree, id, path = []) {
path.push(tree.id);
if (tree?.children) {
for (let i = 0; i < tree?.children.length; i++) {
const o = tree?.children[i];
path.push(o.id);
}
}
return path;
}
g6Graph.value.on("node:click", function (e) {
const item = e.item;
g6Graph.value.setAutoPaint(false);
g6Graph.value.getNodes().forEach(function (node) {
g6Graph.value.clearItemStates(node);
g6Graph.value.setItemState(node, "highlight", true);
});
g6Graph.value.setItemState(item, "highlight", false);
g6Graph.value.setItemState(item, "dark", true);
g6Graph.value.getEdges().forEach(function (edge) {
if (edge.getSource() === item) {
g6Graph.value.setItemState(edge.getTarget(), "highlight", false);
g6Graph.value.setItemState(edge.getTarget(), "dark", true);
g6Graph.value.setItemState(edge, "dark", true);
edge.toFront();
} else if (edge.getTarget() === item) {
g6Graph.value.setItemState(edge.getSource(), "highlight", false);
g6Graph.value.setItemState(edge.getSource(), "dark", true);
g6Graph.value.setItemState(edge, "dark", true);
edge.toFront();
} else {
g6Graph.value.setItemState(edge, "dark", false);
}
});
g6Graph.value.paint();
g6Graph.value.setAutoPaint(true);
});
// g6Graph.value.on("node:mouseout", clearAllStats);
g6Graph.value.on("canvas:click", clearAllStats);
const d = [
{
id: "8000001060",
type: "model",
label: "收拾收拾",
children: [
{
id: "8000000121",
pid: "8000001060",
type: "task",
},
{
id: "80000001213",
pid: "8000001060",
type: "task",
},
{
id: "820000001214",
pid: "8000001060",
type: "task",
},
{
id: "80000001215",
pid: "8000001060",
type: "task",
},
{
id: "80000001216",
pid: "8000001060",
type: "task",
},
{
id: "8000000131",
pid: "8000001060",
type: "task",
},
{
id: "8000000132",
pid: "8000001060",
type: "task",
},
{
id: "8000000133",
pid: "8000001060",
type: "task",
},
{
id: "8000000134",
pid: "8000001060",
type: "task",
},
{
id: "8000000135",
pid: "8000001060",
type: "task",
},
{
id: "8000001062",
pid: "8000001060",
type: "indicator",
},
{
id: "80000010631",
pid: "8000001060",
type: "indicator",
children: [
{
id: "12",
pid: "80000010631",
type: "indicator",
children: [
{
id: "1221",
pid: "12",
type: "task",
},
{
id: "1222",
pid: "12",
type: "task",
},
{
id: "1223",
pid: "12",
type: "task",
},
{
id: "1224",
pid: "12",
type: "task",
},
{
id: "1225",
pid: "12",
type: "task",
},
{
id: "1226",
pid: "12",
type: "task",
},
{
id: "1227",
pid: "12",
type: "task",
},
{
id: "121",
pid: "12",
type: "task",
children: [
{
id: "12271",
pid: "121",
type: "task",
},
{
id: "12272",
pid: "121",
type: "task",
},
{
id: "12273",
pid: "121",
type: "task",
},
{
id: "12274",
pid: "121",
type: "task",
},
],
},
],
},
],
},
{
id: "80000010632",
pid: "8000001060",
type: "indicator",
children: [
{
id: "800000106321",
pid: "80000010632",
type: "indicator",
children: [
{
id: "8000001063211",
pid: "800000106321",
type: "task",
},
{
id: "8000001063212",
pid: "800000106321",
type: "task",
},
{
id: "8000001063213",
pid: "800000106321",
type: "task",
},
],
},
{
id: "800000106322555",
pid: "80000010632",
type: "indicator",
children: [
{
id: "80000010632123",
pid: "800000106322555",
type: "task",
},
],
},
{
id: "800000106323",
pid: "80000010632",
type: "indicator",
children: [
{
id: "8000001063266",
pid: "800000106323",
type: "task",
},
{
id: "8000001063236",
pid: "800000106323",
type: "task",
},
{
id: "8000001063236111",
pid: "800000106323",
type: "task",
},
],
},
],
},
// {
// id: "80000010634",
// pid: "8000001060",
// type: "task",
// },
// {
// id: "80000010634",
// pid: "8000001060",
// type: "task",
// },
// {
// id: "8000001063",
// pid: "8000001060",
// type: "task",
// },
],
},
{
id: "8000000120",
type: "model",
label: "测试测试\n测试",
children: [
{
id: "80000020121",
pid: "8000000120",
type: "task",
},
{
id: "800000201213",
pid: "8000000120",
type: "task",
},
{
id: "800001001214",
pid: "8000000120",
type: "task",
},
{
id: "800003001215",
pid: "8000000120",
type: "task",
},
{
id: "800002001216",
pid: "8000000120",
type: "task",
},
{
id: "8000000460",
pid: "8000000120",
type: "indicator",
},
{
id: "8000000123",
pid: "8000000120",
type: "indicator",
},
{
id: "8000000124",
pid: "8000000120",
type: "indicator",
},
{ id: "8000000125", pid: "8000000120", type: "indicator" },
{ id: "8000000126", pid: "8000000120", type: "indicator" },
{ id: "8000000127", pid: "8000000120", type: "task" },
{ id: "8000000128", pid: "8000000120", type: "task" },
{ id: "8000000129", pid: "8000000120", type: "task" },
{ id: "80000001211", pid: "8000000120", type: "task" },
{ id: "80000001212", pid: "8000000120", type: "task" },
{ id: "80000001214", pid: "8000000120", type: "task" },
// { id: "80000001214", pid: "8000000120", type: "task" },
],
},
];
let arr = [];
$tools.circularRecursion(d, "children", (e, level) => {
e.level = level;
arr.push(e);
});
const edges = [
{
source: "8000001060",
label: "456",
target: "80000020121",
},
{
source: "8000001060",
label: "456",
target: "8000000126",
},
{
source: "8000001060",
label: "456",
target: "8000000128",
},
];
const imgDist = {
rectgreen2: rectGreen2,
rectred2: rectRed2,
rectyellow2: rectYellow2,
circlegreen2: circleGreen2,
circlered2: circleRed2,
circleyellow2: circleYellow2,
circlegreen3: circleGreen3,
circlered3: circleRed3,
circleyellow3: circleYellow3,
cloud: cloud,
};
const nodes = arr.map((e, l) => {
let img = "";
let size = [30, 30];
let type = "";
let style = {};
let labelCfg = {};
let obj = {};
const node = {
task: "circle",
indicator: "rect",
model: "circle",
};
type = "image" || node[e.type];
if (e.type === "model") {
// type = "rect-card";
size = [100, 40];
}
if (e.pid) {
edges.push({
source: e.id,
label: "456",
target: e.pid,
});
}
if (e.type === "model") {
style.fill = "#9fe080";
style.img = imgDist.cloud;
style.width = 100;
style.height = 73;
labelCfg = {
style: {
fill: "#fff",
fontSize: 16,
},
position: "center",
};
// type = "circle";
} else if (e.type === "indicator") {
style.img = imgDist.rectyellow2;
} else {
style.img = imgDist.circlegreen3;
}
// label: e.menuName,
return {
...e,
type,
// label: "",
labelCfg,
style,
size,
img,
icon: { show: false },
...obj,
};
});
console.log(d);
const data = {
nodes,
edges,
};
g6Graph.value.data(data);
g6Graph.value.render();
// g6Graph.value.fitView();
};
onMounted(() => {
init();
});
const s = watch(resizeView, () => {
g6Graph.value.changeSize(g6Ref.value.scrollWidth, g6Ref.value.scrollHeight);
});
onBeforeUnmount(() => {
s();
});
</script>
<style lang="less" scoped> .bg { height: 100%; background: #fff; .g6 { height: 100%; } } </style>
预期行为
希望不要出现那些阴影
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
- G6 版本: [4.5.1 ... ]
屏幕截图或视频（可选）
No response
补充说明（可选）
No response
