webcmp-topo-chart-horizontal

webcmp-topo-chart-horizontal

拓扑图组件封装

Install

# run in terminal
yarn add webcmp-topo-chart-horizontal
# or
npm install webcmp-topo-chart-horizontal

Usage

import Fruchterman from 'webcmp-topo-chart-horizontal'

const fruchterman = new Fruchterman(dom)
fruchterman.render({
  hideExport: true,
  data: {
    nodes: [
      {
        id: '0e359bf67a182f5f58efa5075b113483',
        label: '节点',
        targetTypeName: 'deeeedeeeedeeeedeeeedeeeedeeee',
        icon: 'asset_node',
        showLink: false,
        targetType: 'node',
        link: false,
      },
    ],
    edges: [
      {
        source: '0e359bf67a182f5f58efa5075b113483',
        target: '0e359bf67a182f5f58efa5075b113483',
      },
    ],
  },
})

组件颜色控制

节点状态

1、默认状态 2、hover：鼠标 hover 上去之后的样式 3、hoverNeighbor：hover 节点的兄弟节点样式 4、select：节点被选中样式 5、neighbor：被选中节点的兄弟节点样式

修改默认状态样式

{
  "name": "节点1",
  "label": "修改节点默认样式",
  "id": "节点1",
  "shape": "diamond",
  "icon": "asset_system",
  "style": {
    "fill": "#E2453A",
    "stroke": "#E2453A",
    "lineWidth": 2
  }
}

修改 hover 状态样式

{
  "name": "节点1",
  "label": "修改节点默认样式",
  "id": "节点1",
  "shape": "diamond",
  "icon": "asset_system",
  "stateStyles": {
    "hover": {
      "fill": "#E2453A",
      "stroke": "#E2453A",
      "lineWidth": 2
    }
  }
}

修改 hoverNeighbor 状态样式

{
  "name": "节点1",
  "label": "修改节点默认样式",
  "id": "节点1",
  "shape": "diamond",
  "icon": "asset_system",
  "stateStyles": {
    "hoverNeighbor": {
      "stroke": "#E2453A",
      "fill": "#E2453A",
      "lineWidth": 2,
      "icon": {
        "stroke": "#fff",
        "fill": "#fff"
      }
    }
  }
}

修改 select 状态样式

{
  "name": "节点1",
  "label": "修改节点默认样式",
  "id": "节点1",
  "shape": "diamond",
  "icon": "asset_system",
  "stateStyles": {
    "select": {
      "fill": "#E2453A",
      "stroke": "#E2453A",
      "lineWidth": 2,
      "icon": {
        "stroke": "#fff",
        "fill": "#fff"
      }
    }
  }
}

修改 neighbor 状态样式

{
  "name": "节点1",
  "label": "修改节点默认样式",
  "id": "节点1",
  "shape": "diamond",
  "icon": "asset_system",
  "stateStyles": {
    "neighbor": {
      "stroke": "#E2453A",
      "fill": "#E2453A",
      "lineWidth": 2,
      "icon": {
        "stroke": "#fff",
        "fill": "#fff"
      }
    }
  }
}

连线状态

1、默认状态 2、select：节点 hover 或者选择时候的状态

修改默认状态样式

{
  "source": "0",
  "target": "2",
  "style": {
    "fill": "#E2453A",
    "stroke": "#E2453A",
    "lineWidth": 2
  }
}

修改 select 状态样式

{
  "source": "0",
  "target": "2",
  "stateStyles": {
    "select": {
      "fill": "#E2453A",
      "stroke": "#E2453A",
      "lineWidth": 2
    }
  }
}

整体例子

{
  "nodes": [
    {
      "name": "节点1",
      "label": "节点1",
      "id": "0",
      "shape": "diamond",
      "icon": "asset_system",
      "style": {
        "fill": "#E2453A",
        "stroke": "#E2453A",
        "lineWidth": 2
      }
    },
    {
      "name": "节点2",
      "label": "节点2",
      "id": "2",
      "shape": "diamond",
      "icon": "asset_system",
      "style": {
        "fill": "#E2453A",
        "stroke": "#E2453A",
        "lineWidth": 2
      },
      "stateStyles": {
        "neighbor": {
          "stroke": "#E2453A",
          "fill": "#E2453A",
          "lineWidth": 2,
          "icon": {
            "stroke": "#fff",
            "fill": "#fff"
          }
        },
        "hover": {
          "fill": "#E2453A",
          "stroke": "#E2453A",
          "lineWidth": 2
        },
        "select": {
          "fill": "#E2453A",
          "stroke": "#E2453A",
          "lineWidth": 2,
          "icon": {
            "stroke": "#fff",
            "fill": "#fff"
          }
        },
        "hoverNeighbor": {
          "stroke": "#E2453A",
          "fill": "#E2453A",
          "lineWidth": 2,
          "icon": {
            "stroke": "#fff",
            "fill": "#fff"
          }
        },
        "neighbor": {
          "stroke": "#E2453A",
          "fill": "#E2453A",
          "lineWidth": 2,
          "icon": {
            "stroke": "#fff",
            "fill": "#fff"
          }
        }
      }
    }
  ],
  "edges": [
    {
      "source": "0",
      "target": "2",
      "stateStyles": {
        "fill": "#E2453A",
        "stroke": "#E2453A",
        "lineWidth": 2,
        "icon": {
          "stroke": "#fff",
          "fill": "#fff"
        }
      }
    }
  ]
}