Skip to content

Commit

Permalink
feat: 图片展示
Browse files Browse the repository at this point in the history
  • Loading branch information
@MiracleTanC
MiracleTanC committed Oct 1, 2020
1 parent a8e52fc commit 6161707
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 22 deletions.
30 changes: 20 additions & 10 deletions kg-builder/public/static/kgData.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,79 +6,89 @@
"parentCode": "27301",
"grade": "2",
"name": "儒家",
"uuid": "26365002"
"uuid": "26365002",
"imgsrc": ""
},
{
"code": "273010308",
"flag": "0",
"parentCode": "2730103",
"grade": "4",
"name": "王守仁",
"uuid": "46178689"
"uuid": "46178689",
"imgsrc": "http://h.bytravel.cn/ren/0/head/2057.gif"
},
{
"code": "273010307",
"flag": "0",
"parentCode": "2730103",
"grade": "4",
"name": "陆九渊",
"uuid": "46178686"
"uuid": "46178686",
"imgsrc": "https://bkimg.cdn.bcebos.com/pic/dcc451da81cb39dbde12202dd0160924aa1830fe?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
},
{
"code": "273010306",
"flag": "0",
"parentCode": "2730103",
"grade": "4",
"name": "朱熹",
"uuid": "46178681"
"uuid": "46178681",
"imgsrc": "https://bkimg.cdn.bcebos.com/pic/f31fbe096b63f624da9384678944ebf81b4ca38c?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
},
{
"code": "273010305",
"flag": "0",
"parentCode": "2730103",
"grade": "4",
"name": "程颐",
"uuid": "46178676"
"uuid": "46178676",
"imgsrc": "https://bkimg.cdn.bcebos.com/pic/060828381f30e92489594e3b4f086e061d95f73f?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
},
{
"code": "273010304",
"flag": "0",
"parentCode": "2730103",
"grade": "4",
"name": "董仲舒",
"uuid": "46178671"
"uuid": "46178671",
"imgsrc": "https://bkimg.cdn.bcebos.com/pic/b17eca8065380cd7bbccaaf5a344ad34588281d3?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
},
{
"code": "273010309",
"flag": "0",
"parentCode": "2730103",
"grade": "4",
"name": "曾子",
"uuid": "46178665"
"uuid": "46178665",
"imgsrc": "https://bkimg.cdn.bcebos.com/pic/838ba61ea8d3fd1fa226566e3f4e251f95ca5fb3?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
},
{
"code": "273010303",
"flag": "0",
"parentCode": "2730103",
"grade": "4",
"name": "荀子",
"uuid": "46178660"
"uuid": "46178660",
"imgsrc": "https://bkimg.cdn.bcebos.com/pic/37d3d539b6003af36cf611c53b2ac65c1138b6c3?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"
},
{
"code": "273010302",
"flag": "0",
"parentCode": "2730103",
"grade": "4",
"name": "孟子",
"uuid": "46178654"
"uuid": "46178654",
"imgsrc": "http://img.duoziwang.com/2018/19/07051620110108.jpg"
},
{
"code": "273010301",
"flag": "0",
"parentCode": "2730103",
"grade": "4",
"name": "孔子",
"uuid": "46178648"
"uuid": "46178648",
"imgsrc": "http://img.duoziwang.com/2018/17/05142055603532.jpg"
}
],
"relationship": [
Expand Down
107 changes: 95 additions & 12 deletions kg-builder/src/components/KGBuilder.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,23 +191,42 @@ export default {
var noddd = [
{
flag: '1',
code: '27301',
code: '27301111',
parentCode: '273',
grade: '2',
name: '儒家2',
uuid: '4617858011',
},
{
code: '2730107',
code: '273012222',
flag: '1',
parentCode: '27301',
parentCode: '273',
grade: '3',
name: '故事轶闻2',
uuid: '2636501111',
},
]
var newships = [
{
sourceid: '273',
targetid: '2636501111',
name: '',
targetcode: '2730107',
uuid: '91804213',
sourcecode: '27301',
},
{
sourceid: '273',
targetid: '4617858011',
name: '',
targetcode: '273010723',
uuid: '91804389',
sourcecode: '2730107',
},
]
_this.graph.nodes = _this.graph.nodes.concat(noddd)
_this.updateGraph()
_this.graph.links = _this.graph.links.concat(newships)
_this.updategraph()
},
drawNode(nodes) {
var _this = this
Expand Down Expand Up @@ -239,7 +258,47 @@ export default {
})
nodeEnter.on('mouseleave', function () {
console.log('鼠标移出')
d3.select(this).style('stroke-width', '2')
d3.select(this).style('stroke-width', 2)
//todo其他节点和连线一并显示
d3.select('.node').style('fill-opacity', 1)
d3.select('.nodetext').style('fill-opacity', 1)
d3.selectAll('.linetext').style('fill-opacity', 1)
})
nodeEnter.on('mouseover', function (d) {
//todo鼠标放上去只显示相关节点，其他节点和连线隐藏
d3.selectAll('.node').style('fill-opacity', 0.2)
var relvantNodeIds = []
var relvantNodes = _this.graph.links.filter(function (n) {
return n.sourceid == d.uuid || n.targetid == d.uuid
})
relvantNodes.forEach(function (item) {
relvantNodeIds.push(item.sourceid)
relvantNodeIds.push(item.targetid)
})
_this.qaGraphNode
.selectAll('circle')
.style('fill-opacity', function (c) {
if (relvantNodeIds.indexOf(c.uuid) > -1) {
return 1.0
}
})
d3.selectAll('.nodetext').style('fill-opacity', 0.2)
_this.qaGraphNodeText
.selectAll('.nodetext')
.style('fill-opacity', function (c) {
if (relvantNodeIds.indexOf(c.uuid) > -1) {
return 1.0
}
})
d3.selectAll('.linetext').style('fill-opacity', 0.2)
_this.qaGraphLinkText
.selectAll('.linetext')
.style('fill-opacity', function (c) {
if (c.lk.targetid === d.uuid) {
return 1.0
}
})
})
nodeEnter.call(
d3
Expand All @@ -251,7 +310,7 @@ export default {
node = nodeEnter.merge(node).text(function (d) {
return d.name
})
node.style('opacity', 0.8)
//node.style('opacity', 0.8)
node.style('stroke', function (d) {
if (d.color) {
return d.color
Expand All @@ -260,19 +319,42 @@ export default {
})
node.style('stroke-opacity', 0.6)
node.attr('r', function (d) {
if (d.r) {
return d.r
}
return d.index === 0 ? 28 : 20
})
node.attr('fill', function (d) {
if (d.cur === '1') {
return _this.colorList[0]
node.attr('fill', function (d, i) {
//创建圆形图像
if (d.imgsrc) {
var img_w = 77,
img_h = 80
var defs = d3.selectAll('svg >defs')
var catpattern = defs
.append('pattern')
.attr('id', 'catpattern' + i)
.attr('height', 1)
.attr('width', 1)
catpattern
.append('image')
.attr('x', -(img_w / 2 - d.r))
.attr('y', -(img_h / 2 - d.r))
.attr('width', img_w)
.attr('height', img_h)
.attr('xlink:href', d.imgsrc)
return 'url(#catpattern' + i + ')'
} else {
return _this.colorList[2]
if (d.cur === '1') {
return _this.colorList[0]
} else {
return _this.colorList[2]
}
}
})
node
.append('title') // 为每个节点设置title
.text(function (d) {
if (!d.name) {
if (d.name) {
return d.name
}
return ''
Expand Down Expand Up @@ -329,6 +411,7 @@ export default {
var linkEnter = link
.enter()
.append('line')
//.attr('class', 'link')
.attr('stroke-width', 1)
.attr('stroke', function () {
return _this.colorList[2]
Expand Down Expand Up @@ -588,7 +671,7 @@ export default {
_this.bindEventButtonGroup()
},
dragStarted(d) {
if (!d3.event.active) this.simulation.alphaTarget(0.3).restart()
if (!d3.event.active) this.simulation.alphaTarget(0.8).restart()
d.fx = d.x
d.fy = d.y
},
Expand Down

0 comments on commit 6161707

Please sign in to comment.