初見g 6グラフライブラリ
6176 ワード
hello world
これはレンダリングされた効果です.Demoソース、公式ドキュメント.
カスタムノード
デフォルトのノードは青い輪で、ノードの様子を変えるにはカスタムノードを使用する必要があります.
次の図はレンダリングされた効果です.Demoソース、公式ドキュメント.
ノードをカスタマイズするときに次の現象が発生します. shapeを追加するには前後の順序があり、後は前を上書きします.domのようなz-index textノードを追加すると、他のshapeが回避されます.同じ座標を[0,0]に設定すると、テキストが上部にレンダリングされます. リンク線はreturn要素を基準とします.return textの場合、線はtextノードに接続されます.returnグループなら、全体の真ん中です. modelでは、nodeを定義するときの他のデータ、例えば例のnameを取り出すことができます. で描画された要素のサイズを指定すると、例のdomのような超過部分が切り取られます. dom要素を描画する場合は、オブジェクトを初期化するときに
カスタムエッジ
カスタムエッジの使用方法は、カスタムノードの使用方法と似ています.
これはレンダリングされた効果です.Demoソース、公式ドキュメント.
セクションエッジをカスタマイズする場合は、次の現象があります.に付属するエッジは、透明度のある灰色の線です. 色は、colorを直接設定してもよいし、styleと同じように描画してもよい.
イベントの追加
イベントのリスニングは組合せであり、組合せ方式は[オブジェクト]:[イベント],'node','edge','group','guide'であり、node:click,edge:dbclickのように自由に組み合わせて使用することができる.Demoソース、公式ドキュメント.
// 1.
// node( )
let nodes = [
{
id: 1, // id
x: 0, // x
y: 0 // y
},
{ id: 2, x: 100, y: 0 }
]
// edge( )
let edges = [
{
source: '2', // id,
target: '1' // id,
}
]
// 2.
let g6 = new G6.Graph({
container: 'container', // id
fitView: 'cc', // ,cc (center center)
height: window.innerHeight //
})
// 3.
g6.read({ edges, nodes })
これはレンダリングされた効果です.Demoソース、公式ドキュメント.
カスタムノード
デフォルトのノードは青い輪で、ノードの様子を変えるにはカスタムノードを使用する必要があります.
// 1.
// node( )
let nodes = [
{
id: 1, // id
x: 0, // x
y: 0, // y
name: ' ' //
},
{
id: 2,
x: 100,
y: 0,
name: ' ' //
}
]
// edge( )
let edges = [
{
source: '2', // id,
target: '1' // id,
}
]
// 2.
let g6 = new G6.Graph({
container: 'container', // id
renderer: 'svg',
fitView: 'cc', // ,cc (center center)
height: window.innerHeight //
})
// 3.
G6.registerNode('rect', {
draw (item) {
const group = item.getGraphicGroup()
const model = item.getModel()
let size = 50
let center = size / 2
//
let rect = group.addShape('rect', {
attrs: {
x: 0,
y: 0,
width: size,
height: size,
fill: '#6cf'
}
})
//
let circle = group.addShape('circle', {
attrs: {
x: center,
y: center,
r: center,
fill: '#ddd',
stroke: '#f06'
}
})
//
let text = group.addShape('text', {
attrs: {
x: 0,
y: 0,
fontSize: 20,
fill: '#000',
stroke: 'orange',
text: `id:${model.id}`
}
})
// dom
let dom = group.addShape('dom', {
attrs: {
x: 0,
y: 0,
width: size,
height: size,
html: ` ${model.name}, ${model.name}`
}
})
return group
}
})
// 4.
g6.node({
shape: 'rect'
})
// 5.
g6.read({ edges, nodes })
次の図はレンダリングされた効果です.Demoソース、公式ドキュメント.
ノードをカスタマイズするときに次の現象が発生します.
new G6.Graph({ renderer: 'svg' })
を指定する必要があります.カスタムエッジ
カスタムエッジの使用方法は、カスタムノードの使用方法と似ています.
// 1.
// node( )
let nodes = [
{ id: 1, x: 0, y: 0 },
{ id: 2, x: 100, y: 0 },
{ id: 3, x: 100, y: 50 }
]
// edge( )
let edges = [
{
source: 1, // id,
target: 2 // id,
},
{
source: 1, // id,
target: 3 // id,
}
]
// 2.
let g6 = new G6.Graph({
container: 'container', // id
fitView: 'cc', // ,cc (center center)
height: window.innerHeight //
})
// 3.
G6.registerEdge('line', {
//
getPath (item) {
const points = item.getPoints()
const start = points[0]
const end = points[points.length - 1]
return [
[ 'M', start.x, start.y ],
[ 'L', end.x, end.y ]
]
},
// ( )
startArrow: {
path () {
const r = 5
const x = -5
const y = 0
return [
[ 'M', x, y - r ],
[ 'a', r, r, 0, 1, 1, 0, 2 * r ],
[ 'a', r, r, 0, 1, 1, 0, -2 * r ],
[ 'z' ]
]
},
shorten () {
return 10
},
style (item) {
const keyShape = item.getKeyShape()
const { strokeOpacity, stroke } = keyShape.attr()
return {
fillOpacity: strokeOpacity,
fill: '#fff',
stroke
}
}
}
})
// 4.
g6.edge({
shape: 'line',
startArrow: true, //
color: 'red',
endArrow: true //
})
// 5.
g6.read({ edges, nodes })
これはレンダリングされた効果です.Demoソース、公式ドキュメント.
セクションエッジをカスタマイズする場合は、次の現象があります.
{ endArrow: true }
を設定すると終了点に矢印が付きます.イベントの追加
// 1.
// node( )
let nodes = [
{ id: 1, x: 0, y: 0 },
{ id: 2, x: 100, y: 0 },
{ id: 3, x: 100, y: 50 }
]
// edge( )
let edges = [
{
source: 1, // id,
target: 2 // id,
},
{
source: 1, // id,
target: 3 // id,
}
]
// 2.
let g6 = new G6.Graph({
container: 'container', // id
fitView: 'cc', // ,cc (center center)
height: window.innerHeight //
})
// 3.
g6.on('node:click', (e) => {
const { item } = e
const { id, x, y } = item.getModel()
alert(`id:${id}, x:${x}, y:${y}`)
})
// 4.
g6.read({ edges, nodes })
イベントのリスニングは組合せであり、組合せ方式は[オブジェクト]:[イベント],'node','edge','group','guide'であり、node:click,edge:dbclickのように自由に組み合わせて使用することができる.Demoソース、公式ドキュメント.