0

我正在学习使用 antv/G6 进行网络可视化。我将鼠标悬停在正常工作的节点上（节点为钢蓝色，悬停时变为红色。）但是在边缘上无法正常工作。当鼠标进入其形状时，边缘会改变颜色。但是，一旦鼠标离开，颜色不会恢复为默认值。我创建了一个具有四个节点和两条边的 MWE。任何帮助是极大的赞赏。谢谢。代码如下并且是自包含的。我通常http-server在装有 BigSur, OS11.4 的 Macbook Pro 上使用 Chrome、Firefox 和 Safari 运行并获得类似的行为。

Gordon

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>01. Quick trial</title>
  </head>
  <body>
    <div id="mountNode"></div>
    <script
      defer
      src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"
    ></script>
    <script type="module" src="index.js"></script>
  </body>
</html>

index.js

function convertData() {
  const nodes = [{ id: "1" }, { id: "2" }, { id: "3" }, { id: "4" }];
  const edges = [
    { source: "1", target: "2" },
    { source: "3", target: "4" },
  ];
  const new_data = {
    nodes: nodes,
    edges: edges,
  };
  return new_data;
}

const setupConfiguration = () => {
  const graph = new G6.Graph({
    defaultNode: {
      size: 50,
      // selection of rects works. Circles have a halo around them. WHY?
      type: "rect",
      style: {
        fill: "steelBlue",
        stroke: "#666",
        lineWidth: 0.2,
      },
      labelCfg: {
        style: {
          fill: "#fff",
        }
      }
    },
    defaultEdge: {
      type: "line",
      style: {
        stroke: "orange",
        lineWidth: 25,
      },
    },
    labelCfg: {
      autoRotate: true,
    },
    nodeStateStyles: {
      hover: {
        fill: "red",
      },
    },
    edgeStateStyles: {
      hover: {
        stroke: "blue",
        lineWidth: 5,
      },
    },
    container: "mountNode",
    width: 800,
    height: 500,
    autofit: true,
    fitView: true,
  });
  return graph;
};

const graph = setupConfiguration();

// Mouse enter a node
graph.on("node:mouseenter", (e) => {
  const nodeItem = e.item; // Get the target item
  graph.setItemState(nodeItem, "hover", true);
});

// Mouse exit a node
graph.on("node:mouseleave", (e) => {
  const nodeItem = e.item; // Get the target item
  graph.setItemState(nodeItem, "hover", false);
});

// Mouse enter an edge
graph.on("edge:mouseenter", (e) => {
  const edgeItem = e.item;
  graph.setItemState(edgeItem, "hover", true);
});

// Mouse exit an edge
graph.on("node:mouseleave", (e) => {
  const edgeItem = e.item;
  graph.setItemState(edgeItem, "hover", false);
});

// Render
const data = convertData();

graph.data(data);
graph.render();
4

1 回答 1

0

我发现我的代码存在问题：拼写错误。此代码片段：


    // Mouse exit an edge
    graph.on("node:mouseleave", (e) => {
      const edgeItem = e.item;
      graph.setItemState(edgeItem, "hover", false);
    });

应该写成：

    // Mouse exit an edge
    graph.on("edge:mouseleave", (e) => {
      const edgeItem = e.item;
      graph.setItemState(edgeItem, "hover", false);
    });
于 2021-07-08T20:41:18.190 回答