【图表示例】元素-节点-01

四喜花露水

已于 2025-01-10 11:03:44 修改

阅读量480

点赞数 3

分类专栏： AntV G6 文章标签： javascript 前端 anti-design-vue

于 2025-01-08 10:46:52 首次发布

本文链接：https://blog.csdn.net/gaowxx/article/details/145001477

版权

AntV G6 专栏收录该内容

20 篇文章

订阅专栏

G6A Graph Visualization Framework in JavaScripthttps://g6.antv.antgroup.com/examples/element/node/#circle

项目的创建参考 G6 详细教程，注意，node版本需要：required: { node: '>=18' }G6A Graph Visualization Framework in JavaScripthttps://g6.antv.antgroup.com/manual/getting-started/step-by-step

将其中main.ts的部分改为：

import { Graph, iconfont } from "@antv/g6";

// 在 <head> 中添加 iconfont.css style样式
const style = document.createElement('style');
style.innerHTML = `@import url('${iconfont.css}')`;
document.head.appendChild(style)

// 剥离G6 Graph对象属性，让结构更清晰
// 定义 node 样式
const node = function (d) {
  return {
    type: 'triangle', // circle圆形  rect矩形   diamond菱形  hexagon六边形   triangle三角形  ellipse椭圆  star星形
    style: {
      size: 40,
      // size: [45, 35], // type: 'ellipse' 的情况下, size可以设置为数组
      labelText: (d) => d.id,
      iconFontFamily: 'iconfont',
      iconText: '\ue600',
      // radius: 4, // type: 'rect' 的情况下，可通过 radius 设置圆角
      ports: (d) =>
        d.id === 'ports' ? [{ placement: 'left' }, { placement: 'top' }, { placement: 'right' }] : [],  // 连接桩样式
    }
  }
}

// 定义 layout 布局
const layout = {
  type: 'grid'
}

// fetch json 数据
// Graph 需要 container data node layout，配置好后需要 .render() 进行渲染
fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
  .then((res) => res.json())
  .then((data) => {
    const graph = new Graph({
      container: 'container',
      data,
      node: node(data),
      layout: layout
    })
    graph.render();
  })

节点的样式与nodes的data有关，可以查看最下方的nodes data进行比对

1.在 <head> 中添加 iconfont.css style样式

2.console.log(res)

3.console.log(data)

【iconfont.css】

@font-face {
  font-family: "iconfont"; /* Project id 470089 */
  src: url('//at.alicdn.com/t/a/font_470089_8hnbbf8n4u8.woff2?t=1718604050870') format('woff2'),
       url('//at.alicdn.com/t/a/font_470089_8hnbbf8n4u8.woff?t=1718604050870') format('woff'),
       url('//at.alicdn.com/t/a/font_470089_8hnbbf8n4u8.ttf?t=1718604050870') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-add:before {
  content: "\e664";
}

.icon-error-filledd:before {
  content: "\e605";
}

.icon-star-filledd:before {
  content: "\e606";
}

.icon-pushpin-filledd:before {
  content: "\e603";
}

.icon-qiye:before {
  content: "\e602";
}

.icon-edit:before {
  content: "\e7e1";
}

.icon-star-single-line:before {
  content: "\e7e0";
}

.icon-build:before {
  content: "\e7d5";
}

.icon-block:before {
  content: "\e7df";
}

.icon-bulb:before {
  content: "\e7c3";
}

.icon-skin:before {
  content: "\e7c4";
}

.icon-AntV_logo:before {
  content: "\e8d3";
}

.icon-play_line:before {
  content: "\e8cf";
}

.icon-vist_page_line:before {
  content: "\e8d0";
}

.icon-demo_line:before {
  content: "\e8d1";
}

.icon-code_line:before {
  content: "\e8d2";
}

.icon-wordcloud:before {
  content: "\e648";
}

.icon-sunburstchart:before {
  content: "\e647";
}

.icon-liquidchart:before {
  content: "\e63d";
}

.icon-leidatu:before {
  content: "\e63b";
}

.icon-ringprogress:before {
  content: "\e63c";
}

.icon-bulletchart:before {
  content: "\e642";
}

.icon-waterfallchart:before {
  content: "\e646";
}

.icon-tinyprogress:before {
  content: "\e649";
}

.icon-GRAPHIC:before {
  content: "\e6a9";
}

.icon-star:before {
  content: "\e614";
}

.icon-graphql:before {
  content: "\e604";
}

.icon-case:before {
  content: "\e75d";
}

.icon-tool:before {
  content: "\e650";
}

.icon-shijieditu:before {
  content: "\e63a";
}

.icon-xianjiquhua:before {
  content: "\e672";
}

.icon-search1:before {
  content: "\e60d";
}

.icon-shape:before {
  content: "\e7f7";
}

.icon-text:before {
  content: "\e959";
}

.icon-data:before {
  content: "\e6ab";
}

.icon-mapmarker:before {
  content: "\e777";
}

.icon-story:before {
  content: "\e7b0";
}

.icon-filedone:before {
  content: "\e7b4";
}

.icon-dian:before {
  content: "\e645";
}

.icon-raster:before {
  content: "\e641";
}

.icon-xian:before {
  content: "\e643";
}

.icon-polygon:before {
  content: "\e644";
}

.icon-down1:before {
  content: "\e640";
}

.icon-bar:before {
  content: "\e8bf";
}

.icon-exitfullscreen:before {
  content: "\e719";
}

.icon-fullscreen:before {
  content: "\e63f";
}

.icon-component:before {
  content: "\e802";
}

.icon-interaction:before {
  content: "\e813";
}

.icon-tubiao:before {
  content: "\e611";
}

.icon-axis:before {
  content: "\e60a";
}

.icon-ruler:before {
  content: "\e62e";
}

.icon-yaxis:before {
  content: "\e839";
}

.icon-guide:before {
  content: "\e6af";
}

.icon-tooltip:before {
  content: "\e8ef";
}

.icon-legend:before {
  content: "\e762";
}

.icon-region:before {
  content: "\e601";
}

.icon-erweima:before {
  content: "\e6fb";
}

.icon-menu-unfold:before {
  content: "\e9ac";
}

.icon-menu-fold:before {
  content: "\e9ad";
}

.icon-gallery:before {
  content: "\e6fa";
}

.icon-execute:before {
  content: "\e6e9";
}

.icon-copy:before {
  content: "\e6f9";
}

.icon-editor:before {
  content: "\e6df";
}

.icon-sinaweibo:before {
  content: "\e6f5";
}

.icon-github:before {
  content: "\e6f6";
}

.icon-link:before {
  content: "\e6e7";
}

.icon-search:before {
  content: "\e600";
}

.icon-choropleth-map:before {
  content: "\e6eb";
}

.icon-down:before {
  content: "\e6e1";
}

.icon-left:before {
  content: "\e6e2";
}

.icon-arrowright:before {
  content: "\e6e3";
}

.icon-top:before {
  content: "\e6e4";
}

.icon-arrowleft:before {
  content: "\e6e6";
}

.icon-right:before {
  content: "\e6ef";
}

.icon-relation:before {
  content: "\e6f0";
}

.icon-candle:before {
  content: "\e6f1";
}

.icon-candlestick:before {
  content: "\e6f2";
}

.icon-point:before {
  content: "\e6f3";
}

.icon-map:before {
  content: "\e6f4";
}

.icon-g2:before {
  content: "\e9ae";
}

.icon-tag-compare:before {
  content: "\e609";
}

.icon-tag-relation:before {
  content: "\e60b";
}

.icon-tag-location:before {
  content: "\e60e";
}

.icon-tag-distribute:before {
  content: "\e60c";
}

.icon-tag-range:before {
  content: "\e60f";
}

.icon-tag-trend:before {
  content: "\e62d";
}

.icon-tag-time:before {
  content: "\e610";
}

.icon-column:before {
  content: "\e612";
}

.icon-line:before {
  content: "\e613";
}

.icon-donut:before {
  content: "\e617";
}

.icon-pie:before {
  content: "\e615";
}

.icon-other:before {
  content: "\e6f8";
}

.icon-rose:before {
  content: "\e616";
}

.icon-area:before {
  content: "\e618";
}

.icon-radar:before {
  content: "\e619";
}

.icon-bubble:before {
  content: "\e61a";
}

.icon-treemap:before {
  content: "\e61c";
}

.icon-heatmap:before {
  content: "\e61b";
}

.icon-contour-line:before {
  content: "\e61d";
}

.icon-tree:before {
  content: "\e61f";
}

.icon-flow:before {
  content: "\e620";
}

.icon-chord:before {
  content: "\e62b";
}

.icon-sankey:before {
  content: "\e62c";
}

.icon-18wangzhuangtu:before {
  content: "\e621";
}

.icon-tag-map:before {
  content: "\e622";
}

.icon-box:before {
  content: "\e629";
}

.icon-histogram:before {
  content: "\e623";
}

.icon-distribution-curve:before {
  content: "\e625";
}

.icon-mosaic:before {
  content: "\e626";
}

.icon-funnel:before {
  content: "\e624";
}

.icon-k-chart:before {
  content: "\e627";
}

.icon-gauge:before {
  content: "\e62a";
}

.icon-venn:before {
  content: "\e628";
}

.icon-regression-curve:before {
  content: "\e61e";
}

.icon-tag-flow:before {
  content: "\e62f";
}

.icon-multi-set-bar:before {
  content: "\e630";
}

.icon-stacked-bar:before {
  content: "\e632";
}

.icon-bubble-map:before {
  content: "\e631";
}

.icon-stem-leaf:before {
  content: "\e633";
}

.icon-dot-map:before {
  content: "\e634";
}

.icon-radial-bar:before {
  content: "\e635";
}

.icon-scatter:before {
  content: "\e637";
}

.icon-all:before {
  content: "\e639";
}

.icon-stacked-area:before {
  content: "\e636";
}

.icon-color-map:before {
  content: "\e63e";
}

.icon-arc:before {
  content: "\e6c9";
}

.icon-kagi:before {
  content: "\e6ca";
}

.icon-spiral:before {
  content: "\e6cb";
}

.icon-tag-proportion:before {
  content: "\e6cf";
}

.icon-force-directed:before {
  content: "\e6e5";
}

.icon-uml:before {
  content: "\e6e8";
}

.icon-facet:before {
  content: "\e6ea";
}

.icon-bi-directional-bar:before {
  content: "\e6ec";
}

.icon-word-cloud:before {
  content: "\e6ed";
}

.icon-bullet:before {
  content: "\e6ee";
}

.icon-health:before {
  content: "\e9b0";
}

.icon-net:before {
  content: "\e6f7";
}

【nodes Data】

{
    "nodes": [
        {
            "id": "default"
        },
        {
            "id": "halo",
            "style": {
                "halo": true
            }
        },
        {
            "id": "badges",
            "style": {
                "badges": [
                    {
                        "text": "A",
                        "placement": "right-top"
                    },
                    {
                        "text": "Important",
                        "placement": "right"
                    },
                    {
                        "text": "Notice",
                        "placement": "right-bottom"
                    }
                ],
                "badgeFontSize": 8,
                "badgePadding": [
                    1,
                    4
                ]
            }
        },
        {
            "id": "ports",
            "style": {
                "portR": 3,
                "ports": [
                    {
                        "placement": "left"
                    },
                    {
                        "placement": "right"
                    },
                    {
                        "placement": "top"
                    },
                    {
                        "placement": "bottom"
                    }
                ]
            }
        },
        {
            "id": "active",
            "states": [
                "active"
            ]
        },
        {
            "id": "selected",
            "states": [
                "selected"
            ]
        },
        {
            "id": "highlight",
            "states": [
                "highlight"
            ]
        },
        {
            "id": "inactive",
            "states": [
                "inactive"
            ]
        },
        {
            "id": "disabled",
            "states": [
                "disabled"
            ]
        }
    ]
}