svg技術繪製血緣關係

2021-10-08 21:34:24 字數 2370 閱讀 4052

介面返回的資料結構如下:

**實現:

// dag.js

const

svg_ns

=''export

const

gettextwidth

= text =>

// 建立tag標籤

export

const

createtag

=(tag, attrobjs)

=>

return tagele

}// node類

class

dagnode

, options =

, containerid)

// 繪製node

drawnode()

)let otext =

createtag

('text',)

let tspan =

createtag

('tspan',)

tspan.innerhtml =`$

` let tspan2 =

createtag

('tspan',)

tspan2.innerhtml =`$

/ $` otext.

(tspan)

otext.

(tspan2)

og.(orect)

og.(otext)

document.

getelementbyid

(this

.containerid)

.(og)

return og

}// 繪製帶箭頭的曲線條

drawline

(start =

, end =

, arrow =)$

l$$`

:` m$$

l$$q

$$$$

l$$q

$$$$

l$$`

}else$l

$$` :

` m$$l

$$q$

$$$l

$$q$

$$$l

$$` }

let oline =

createtag

('path',)

let oarrow =

createtag

('path',$

$z`, style:

'fill: #303030; stroke: #303030; stroke-width: 2;'})

og.(oline)

og.(oarrow)

document.

getelementbyid

(this

.containerid)

.(og)

return og

}}export

class

nodegraph

)// 設定nodes座標

setnodes

(data =

) data.parentlist && data.parentlist.

foreach

((item, index)

=>

else

centernode.prev.

push

(node)})

}// 設定子節點node

if(data.

hasownproperty

('childrenlist'))

else

centernode.next.

push

(node)})

}this

.center = centernode

}drawsvg()

else

// 繪製節點

node.

drawnode()

// 繪製線條

node.

drawline(,

,)})

nnode.length && nnode.

foreach

((node, index)

=>

else

// 繪製節點

node.

drawnode()

// 繪製線條

node.

drawline(,

,)})

}}

// jobblood.vue

="the-job-blood-container"

>

血緣關係真神秘

size large 這一年多為了上專案,把我可折騰壞了,打算好好的休息一下,好好調整一下。這個十一的假期我休息了10天,真的過的很快,陪女兒 女兒兩歲九個月了 玩。我老婆在十一的時候把她接回來了,和女兒分別9個月左右,還真的很想念她。平時給她打 的時候,她就叫一聲,就不願意聽了,甚至根本就不聽。真...

非血緣關係程序間mmap通訊

建立乙個讀檔案 mmap r.c include include include include include include include struct stu void sys err char str intmain int argc,char ar fd open ar 1 o rdon...

大資料 人工智慧 機械人的血緣關係?

大資料 人工智慧 ai 機械人 演算法 深度學習 物聯網 感測器 這些名詞似乎每天都會看到或聽到,當人們還搞不清楚是什麼時,已不斷報導人類的工作將很快被取代,讓人們愈來愈焦慮。我跟大家有一樣的疑惑,但是資訊科學始終對我有份致命的吸引力。可能因為我的第乙份工作,是當了4年的程式設計師。去年,我才毅然放...