A-A+

antv G6辐射图

2019年11月28日 图形可视化 暂无评论 阅读 650 次

antv G6辐射图使用中遇得到的问题

  drawImg2 = () => {
    const width = document.getElementById('aiContent').scrollWidth || 500;
    const height = document.getElementById('aiContent').scrollHeight || 500;
    // 实例化 minimap 插件
    const minimap = new Minimap({
      size: [50, 50],
      className: 'minimap',
      type: 'delegate',
    });
    const graph = new G6.Graph({
      container: 'container',
      width,
      height,
      renderer: 'svg',
      // fitView: true, // 适配
      // fitViewPadding: [ 20, 40, 50, 20 ],// jianju
      plugins: [minimap], // 将 minimap 实例配置到图上 将 grid 实例配置到图上
      // animate: true, // Boolean,可选,切换布局时是否使用动画过度
      layout: {  //布局
        type: 'force',            // 设置布局算法为 force
        // linkDistance: 80,        // 设置边长为 100
        preventOverlap: true,     // 设置防止重叠
        fitView: true,
      },
      defaultNode: {
        size: 15,
        style: {
          fill: '#C6E5FF',
          stroke: '#5B8FF9'
        },
      },
      defaultEdge: {
        style: {
          stroke: '#A3B1BF',
          endArrow: true
        }
      },
      modes: {
        default: [
          'drag-canvas',
          'zoom-canvas',
          'drag-node',
          {
            type: 'tooltip', // 提示框
            formatText(model) {
              // 提示框文本内容
              const text = 'label: ' + model.label + '<br/> class: ' + model.class;
              return text;
            },
          },
          {
            type: 'edge-tooltip', // 边提示框
            formatText(model) {
              // 边提示框文本内容
              const text =
                'source: ' +
                model.source +
                '<br/> target: ' +
                model.target +
                '<br/> weight: ' +
                model.weight;
              return text;
            },
          },
        ], // 允许拖拽画布、放缩画布、拖拽节点
      },
    });
    const main = async () => {
      const response = await fetch('https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json');
      const remoteData = {
        "nodes": [
          {"id": "0", "label": "n0", "class": "c0"},
          {"id": "1", "label": "n1", "class": "c0"},
          {"id": "2", "label": "n2", "class": "c0"},
          {"id": "3", "label": "n3", "class": "c0"},
          {"id": "4", "label": "n4", "class": "c0"},
          {"id": "5", "label": "n5", "class": "c0"},
          {"id": "6", "label": "n6", "class": "c1"},
          {"id": "7", "label": "n7", "class": "c1"},
          {"id": "8", "label": "n8", "class": "c1"},
          {"id": "9", "label": "n9", "class": "c1"},
          {"id": "10", "label": "n10", "class": "c1"},
          {"id": "11", "label": "n11", "class": "c1"},
          {"id": "12", "label": "n12", "class": "c1"},
          {"id": "13", "label": "n13", "class": "c2"},
          {"id": "14", "label": "n14", "class": "c2"},
          {"id": "15", "label": "n15", "class": "c2"},
          {"id": "16", "label": "n16", "class": "c2"},
          {"id": "17", "label": "n17", "class": "c2"},
          {"id": "18", "label": "n18", "class": "c2"},
          {"id": "19", "label": "n19", "class": "c2"}
        ],
        "edges": [
          {"source": "0", "target": "1", "weight": 1},
          {"source": "0", "target": "2", "weight": 2},
          {"source": "0", "target": "3", "weight": 3},
          {"source": "0", "target": "4", "weight": 1.4},
          {"source": "0", "target": "5", "weight": 2},
          {"source": "0", "target": "7", "weight": 2},
          {"source": "0", "target": "8", "weight": 2},
          {"source": "0", "target": "9", "weight": 1.3},
          {"source": "0", "target": "10", "weight": 1.5},
          {"source": "0", "target": "11", "weight": 1},
          {"source": "0", "target": "13", "weight": 1},
          {"source": "0", "target": "14", "weight": 2},
          {"source": "0", "target": "15", "weight": 0.5},
          {"source": "0", "target": "16", "weight": 0.8},
          {"source": "2", "target": "3", "weight": 1},
          {"source": "4", "target": "5", "weight": 1.4},
          {"source": "4", "target": "6", "weight": 2.1},
          {"source": "5", "target": "6", "weight": 1.9},
          {"source": "7", "target": "13", "weight": 0.5},
          {"source": "8", "target": "14", "weight": 0.8},
          {"source": "9", "target": "10", "weight": 0.2},
          {"source": "10", "target": "14", "weight": 1},
          {"source": "10", "target": "12", "weight": 1.2},
          {"source": "11", "target": "14", "weight": 1.2},
          {"source": "12", "target": "13", "weight": 2.1},
          {"source": "16", "target": "17", "weight": 2.5},
          {"source": "16", "target": "18", "weight": 1},
          {"source": "17", "target": "18", "weight": 1},
          {"source": "18", "target": "19", "weight": 1.6}
        ]
      };
      const nodes = remoteData.nodes;
      nodes.forEach(node => {
        if (!node.style) {
          node.style = {};
        }
        // switch (
        //   node.class // 根据节点数据中的 class 属性配置图形
        //   ) {
        //   case 'c0': {
        //     node.shape = 'circle'; // class = 'c0' 时节点图形为 circle
        //     break;
        //   }
        //   case 'c1': {
        //     node.shape = 'rect'; // class = 'c1' 时节点图形为 rect
        //     node.size = [35, 20]; // class = 'c1' 时节点大小
        //     break;
        //   }
        //   case 'c2': {
        //     node.shape = 'ellipse'; // class = 'c1' 时节点图形为 ellipse
        //     node.size = [35, 20]; // class = 'c2' 时节点大小
        //     node.linkPoints = {
        //       top: true,
        //       bottom: true,
        //       left: true,
        //       right: true,
        //       fill: '#fff',
        //       size: 5,
        //     }
        //     node.icon= {
        //       show: true,
        //       //img: '...', 可更换为其他图片地址
        //       width: 25,
        //       height: 25,
        //     }
        //     break;
        //   }
        // }
      });
      // 遍历边数据
      const edges = remoteData.edges;
      edges.forEach(edge => {
        if (!edge.style) {
          edge.style = {};
        }
        edge.style.lineWidth = edge.weight;
        edge.style.opacity = 0.6;
        edge.style.stroke = 'grey';
        edge.style.endArrow = true;
      });

      graph.data(remoteData);
      graph.render();
    };
    main();
  }
  drawImg = () => {
    let {isShow} = this.state
    if (isShow) return;
    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
      .then(res => res.json())
      .then(data => {
        const width = document.getElementById('container').scrollWidth || 500;
        const height = document.getElementById('container').scrollHeight || 500;
        // 实例化 minimap 插件
        const minimap = new Minimap({
          size: [100, 100],
          className: 'minimap',
          type: 'delegate',
        });

        G6.registerEdge('line-arrow', {
          draw(cfg, group) {
            const {startPoint, endPoint} = cfg;
            const keyShape = group.addShape('path', {
              attrs: {
                path: [
                  ['M', startPoint.x, startPoint.y],
                  ['L', endPoint.x, endPoint.y],
                ],
                stroke: 'steelblue',
                lineWidth: 3,
                startArrow: {
                  path: 'M 10,0 L -10,-10 L -10,10 Z',
                  d: 10,
                },
                endArrow: {
                  path: 'M 10,0 L -10,-10 L -10,10 Z',
                  d: 10,
                },
              },
            });
            return keyShape;
          },
        });

        const graph = new G6.TreeGraph({
          container: 'container',
          width,
          height,
          fitView: true,
          pixelRatio: 2,
          linkCenter: true,
          modes: {
            default: [
              {
                type: 'collapse-expand',
                onChange: function onChange(item, collapsed) {
                  console.log("===============>")
                  const data = item.get('model').data;
                  data.collapsed = collapsed;
                  return true;
                }
              },
              'drag-canvas',
              'zoom-canvas',],
          },
          defaultNode: {
            size: 26,
            style: {
              fill: '#C6E5FF',
              stroke: '#5B8FF9'
            }
          },
          defaultEdge: {
            style: {
              stroke: '#A3B1BF',
              // endArrow : true,
              // lineWidth:5,
              endArrow: {
                path: 'M 0,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0),指向 x 轴正方向的path
                d: 10,
              },
            },

          },
          layout: {
            type: 'compactBox',
            direction: 'RL',
            preventOverlap: true,  // 防止节点重叠
            getId: function getId(d) {
              return d.id;
            },
            getHeight: () => {
              return 26;
            },
            getWidth: () => {
              return 26;
            },
            getVGap: () => {
              return 20;
            },
            getHGap: () => {
              return 30;
            },
            radial: true
          }
        });

        graph.node(function (node) {
          return {
            label: node.name
          };
        });
        const dataN = {
          "id": "1",
          "name": "滑膜炎",
          shape: 'rect',
          size: [35, 50],
          "children": [
            {
              "id": "2",
              "name": "体征",
              "children": [
                {
                  "id": "3",
                  "name": "体征",
                },
                {
                  "id": "4",
                  "name": "体征",
                },
                {
                  "id": "5",
                  "name": "体征",
                },
                {
                  "id": "6",
                  "name": "体征",
                  size: 80
                },
                {
                  "id": "7",
                  "name": "膝关节咽痛222",
                  size: 80
                },
                {
                  "id": "8",
                  "name": "膝关节咽痛222"
                },
                {
                  "id": "9",
                  "name": "膝关节咽痛5544",
                  "style": {
                    fill: '#000',
                  },
                  labelCfg: {
                    style: {
                      fill: 'red',
                      shadowOffsetX: 10,
                      shadowOffsetY: 10,
                      shadowColor: 'blue',
                      shadowBlur: 10,
                    },
                  },
                  size: 50
                },
                {
                  "id": "25",
                  "name": "膝关节25",
                }
              ]
            },
            {
              "id": "333",
              "name": "3333",
              "children": [
                {
                  "id": "25",
                  "name": "Models diversity",
                  "children": [
                    {
                      "id": "24",
                      "name": "2膝关节4",
                    },
                    {
                      "id": "23",
                      "name": "2膝关节3",
                    },
                    {
                      "id": "22",
                      "name": "2膝关节2",
                    },
                    {
                      "id": "21",
                      "name": "2膝关节1",
                    },
                    {
                      "id": "20",
                      "name": "20膝关节",
                    },
                    {
                      "id": "19",
                      "name": "1膝关节9",
                    }
                  ]
                },
                {
                  "id": "Methods",
                  "children": [
                    {
                      "id": "18",
                      "name": "1膝关节8",
                    },
                    {
                      "id": "17",
                      "name": "1膝关节7",
                    }
                  ]
                },
                {
                  "id": "Common",
                  "children": [
                    {
                      "id": "15",
                      "name": "1膝关节5",
                    },
                    {
                      "id": "16",
                      "name": "1膝关节6",
                    },
                    {
                      "id": "AdaBoost",
                      "name": "1膝3关节6",
                    }
                  ]
                }
              ]
            },
            {
              "id": "Regression",
              "children": [
                {
                  "id": "11",
                  "name": "11",
                },
                {
                  "id": "12",
                  "name": "12",
                },
                {
                  "id": "13",
                  "name": "13",
                },
                {
                  "id": "14",
                  "name": "14",
                },
                {
                  "id": "15",
                  "name": "15",
                }
              ]
            }
          ]
        }

        graph.data(dataN);
        graph.render();
        graph.fitView();
      });

    this.setState({
      show: true
    })
  }

参考:
官方demo
官方API
箭头的N种可能
G6 中文本的处理

hover时修改label

节点或边上的文本超长时,可以通过使用 JS 来计算文本长度,也可以通过使用 \n 来进行换行。 G6 中文本的处理

remoteData.nodes[i].label = remoteData.nodes[i].text.substring(0, 6);
 remoteData.nodes[i].defalutLabel = remoteData.nodes[i].text;
remoteData.nodes[i].formatLabel = remoteData.nodes[i].text.substring(0, 6);
graph.on('node:mouseenter', evt => {
      const node = evt.item;
      const model = node.getModel();
      // model.oriLabel = model.label;
      console.log('noden-----odeno--------denode', model)
      graph.setItemState(node, 'hover', true);
      graph.updateItem(node, {
        label: model.defalutLabel,
        labelCfg: {
          style: {
            fill: '#003a8c',
          },
        },
      });
    });

    graph.on('node:mouseleave', evt => {
      const node = evt.item;
      const model = node.getModel();
      graph.setItemState(node, 'hover', false);
      graph.updateItem(node, {
        label: model.formatLabel,
        labelCfg: {
          style: {
            fill: '#555',
          },
        },
      });
    });
  };
标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录