window.onload = function() {
var d3Sample = function () {
let data = {
links: [
{
source: 0,
target: 1,
value: '英文名称'
},
{
source: 1,
target: 2,
value: ''
},
{
source: 0,
target: 3,
value: 'UMLS'
},
{
source: 3,
target: 4,
value: ''
},
{
source: 0,
target: 5,
value: 'ICD-10'
},
{
source: 5,
target: 6,
value: ''
},
{
source: 0,
target: 7,
value: '临床症状及体征'
},
{
source: 7,
target: 8,
value: ''
},
{
source: 7,
target: 9,
value: ''
},
{
source: 7,
target: 10,
value: ''
},
{
source: 7,
target: 11,
value: ''
},
{
source: 7,
target: 12,
value: ''
},
{
source: 7,
target: 13,
value: ''
},
{
source: 7,
target: 14,
value: ''
},
{
source: 7,
target: 15,
value: ''
},
{
source: 7,
target: 16,
value: ''
},
{
source: 7,
target: 17,
value: ''
},
{
source: 7,
target: 18,
value: ''
},
{
source: 0,
target: 19,
value: '所属科室'
},
{
source: 19,
target: 20,
value: ''
},
{
source: 19,
target: 21,
value: ''
},
{
source: 0,
target: 22,
value: '实验室检查'
},
{
source: 22,
target: 23,
value: ''
},
{
source: 0,
target: 24,
value: '并发症'
},
{
source: 24,
target: 25,
value: ''
},
{
source: 24,
target: 26,
value: ''
},
{
source: 24,
target: 27,
value: ''
},
{
source: 24,
target: 28,
value: ''
},
{
source: 0,
target: 29,
value: '辅助检查'
},
{
source: 29,
target: 30,
value: ''
},
{
source: 0,
target: 31,
value: '发病部位'
},
{
source: 31,
target: 32,
value: ''
},
{
source: 0,
target: 33,
value: '治疗方案'
},
{
source: 33,
target: 34,
value: ''
},
{
source: 33,
target: 35,
value: ''
},
{
source: 33,
target: 36,
value: ''
},
{
source: 33,
target: 37,
value: ''
},
{
source: 33,
target: 38,
value: ''
},
{
source: 33,
target: 39,
value: ''
},
{
source: 33,
target: 40,
value: ''
},
{
source: 33,
target: 41,
value: ''
},
{
source: 33,
target: 42,
value: ''
},
{
source: 0,
target: 43,
value: '检查'
},
{
source: 43,
target: 44,
value: ''
},
{
source: 0,
target: 45,
value: '病因'
},
{
source: 45,
target: 46,
value: ''
},
{
source: 45,
target: 47,
value: ''
}
],
nodes: [
{
category: 0,
label: '复发性风湿症',
name: 0,
symbolSize: 50
},
{
category: 1,
label: '',
name: 1,
symbol: 'diamond',
symbolSize: 10
},
{
category: 2,
label: 'palindromic rheumatism',
name: 2,
symbol: 'rect',
symbolSize: 28
},
{
category: 1,
label: '',
name: 3,
symbol: 'diamond',
symbolSize: 10
},
{
category: 3,
label: 'http://linkedlifedata.com/resource/umls/id/C0085574',
name: 4,
symbolSize: 28
},
{
category: 1,
label: '',
name: 5,
symbol: 'diamond',
symbolSize: 10
},
{
category: 4,
label: 'M12.3',
name: 6,
symbol: 'rect',
symbolSize: 28
},
{
category: 1,
label: '',
name: 7,
symbol: 'diamond',
symbolSize: 10
},
{
category: 5,
label: '低热',
name: 8,
symbol: 'rect',
symbolSize: 28
},
{
category: 5,
label: '低热等',
name: 9,
symbol: 'rect',
symbolSize: 28
},
{
category: 5,
label: '痛风',
name: 10,
symbolSize: 28
},
{
category: 5,
label: '僵硬',
name: 11,
symbol: 'rect',
symbolSize: 28
},
{
category: 5,
label: '疼痛',
name: 12,
symbolSize: 28
},
{
category: 5,
label: '指垫',
name: 13,
symbol: 'rect',
symbolSize: 28
},
{
category: 5,
label: '关节疼痛常十分明显',
name: 14,
symbol: 'rect',
symbolSize: 28
},
{
category: 5,
label: '足跟和其他软组织可发生水肿和疼痛',
name: 15,
symbol: 'rect',
symbolSize: 28
},
{
category: 5,
label: '肿胀',
name: 16,
symbol: 'rect',
symbolSize: 28
},
{
category: 5,
label: '关节疼痛',
name: 17,
symbolSize: 28
},
{
category: 5,
label: '水肿',
name: 18,
symbolSize: 28
},
{
category: 1,
label: '',
name: 19,
symbol: 'diamond',
symbolSize: 10
},
{
category: 6,
label: '风湿免疫科',
name: 20,
symbol: 'rect',
symbolSize: 28
},
{
category: 6,
label: '风湿科',
name: 21,
symbol: 'rect',
symbolSize: 28
},
{
category: 1,
label: '',
name: 22,
symbol: 'diamond',
symbolSize: 10
},
{
category: 7,
label: '红细胞沉降率',
name: 23,
symbolSize: 28
},
{
category: 1,
label: '',
name: 24,
symbol: 'diamond',
symbolSize: 10
},
{
category: 8,
label: '水肿',
name: 25,
symbolSize: 28
},
{
category: 8,
label: '疼痛',
name: 26,
symbolSize: 28
},
{
category: 8,
label: '本病可并发指垫',
name: 27,
symbol: 'rect',
symbolSize: 28
},
{
category: 8,
label: '足跟和其他软组织发生',
name: 28,
symbol: 'rect',
symbolSize: 28
},
{
category: 1,
label: '',
name: 29,
symbol: 'diamond',
symbolSize: 10
},
{
category: 9,
label: 'X线检查',
name: 30,
symbol: 'rect',
symbolSize: 28
},
{
category: 1,
label: '',
name: 31,
symbol: 'diamond',
symbolSize: 10
},
{
category: 10,
label: '多见于30～60岁人群',
name: 32,
symbol: 'rect',
symbolSize: 28
},
{
category: 1,
label: '',
name: 33,
symbol: 'diamond',
symbolSize: 10
},
{
category: 11,
label: '泼尼松',
name: 34,
symbolSize: 28
},
{
category: 11,
label: '青霉素',
name: 35,
symbolSize: 28
},
{
category: 11,
label: '硫代苹果酸金钠',
name: 36,
symbolSize: 28
},
{
category: 11,
label: '西医治疗',
name: 37,
symbol: 'rect',
symbolSize: 28
},
{
category: 11,
label: '葡萄糖',
name: 38,
symbolSize: 28
},
{
category: 11,
label: '秋水仙碱',
name: 39,
symbolSize: 28
},
{
category: 11,
label: '青霉胺',
name: 40,
symbolSize: 28
},
{
category: 11,
label: '中医治疗',
name: 41,
symbol: 'rect',
symbolSize: 28
},
{
category: 11,
label: '金硫葡糖',
name: 42,
symbolSize: 28
},
{
category: 1,
label: '',
name: 43,
symbol: 'diamond',
symbolSize: 10
},
{
category: 12,
label: '实验室检查',
name: 44,
symbol: 'rect',
symbolSize: 28
},
{
category: 1,
label: '',
name: 45,
symbol: 'diamond',
symbolSize: 10
},
{
category: 13,
label: '有人认为免疫过程可能参与',
name: 46,
symbol: 'rect',
symbolSize: 28
},
{
category: 13,
label: '目前有关本病的病因所知不多',
name: 47,
symbol: 'rect',
symbolSize: 28
}
]
}
var g = Viva.Graph.graph()
g.Name = 'Sample graph from d3 library'
for (var i = 0; i < data.nodes.length; ++i) {
g.addNode(i, data.nodes[i])
}
for (i = 0; i < data.links.length; ++i) {
var link = data.links[i]
// g.addLink(link.source, link.target, link.value)
g.addLink(link.source, link.target, 1)
}
return g
}
var colors = [
'#1f77b4',
'#aec7e8',
'#ff7f0e',
'#ffbb78',
'#2ca02c',
'#98df8a',
'#d62728',
'#ff9896',
'#9467bd',
'#c5b0d5',
'#8c564b',
'#c49c94',
'#e377c2',
'#f7b6d2',
'#7f7f7f',
'#c7c7c7',
'#bcbd22',
'#dbdb8d',
'#17becf',
'#9edae5'
];
(function () {
var graph = d3Sample()
var layout = Viva.Graph.Layout.forceDirected(graph, {
springLength: 200
// springCoeff: 0.00055,
// dragCoeff: 0.09,
// gravity: -2
})
var svgGraphics = Viva.Graph.View.svgGraphics()
var nodeSize = 12
svgGraphics
.node(function (node) {
var groupId = node.data.category
var ui = Viva.Graph.svg('g')
var svgText = Viva.Graph.svg('text')
.attr('y', '-8px')
.attr('x', '8px')
.text(node.data.label)
var circle = Viva.Graph.svg('circle')
.attr('r', nodeSize)
.attr('stroke', '#fff')
.attr('stroke-width', '1.5px')
.attr('fill', colors[groupId ? groupId - 1 : 5])
circle.append('title').text(node.data.label)
ui.append(circle)
ui.append(svgText)
return ui
})
.placeNode(function (nodeUI, pos) {
// 'g' element doesn't have convenient (x,y) attributes, instead
// we have to deal with transforms: http://www.w3.org/TR/SVG/coords.html#SVGGlobalTransformAttribute
nodeUI.attr('transform',
'translate(' +
(pos.x - nodeSize / 2) + ',' + (pos.y - nodeSize / 2) +
')')
})
// .placeNode(function (nodeUI, pos) {
// nodeUI.attr('cx', pos.x).attr('cy', pos.y)
// })
svgGraphics.link(function (link) {
console.log('link.data', link.data)
return Viva.Graph.svg('line')
.attr('stroke', '#999')
.attr('stroke-width', Math.sqrt(link.data))
})
debugger
var renderer = Viva.Graph.View.renderer(graph, {
container: document.getElementById('graph3'),
layout: layout,
graphics: svgGraphics,
prerender: 20,
renderLinks: true
})
renderer.run(500)
}())
}
<div id="graph3"></div>
* {
margin: 0
}
#graph3 {
height: 100vh;
position: relative;
vertical-align: middle;
width: 100%;
}
#graph3 svg {
width: 100%;
height: 100%;
}