|
- <!DOCTYPE html>
- <meta charset="utf-8" />
- <style>
- .link {
- fill: none;
- stroke: #666;
- stroke-width: 1.5px;
- }
-
- #licensing {
- fill: green;
- }
-
- .link.licensing {
- stroke: green;
- }
-
- .link.resolved {
- stroke-dasharray: 0, 2 1;
- }
-
- circle {
- fill: #ccc;
- stroke: #333;
- stroke-width: 1.5px;
- }
-
- text {
- font: 12px Microsoft YaHei;
- pointer-events: none;
- text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
- }
-
-
- </style>
-
- <body>
- <div class="navbar navbar-inverse">
- <!-- <label for="input"></label>-->
- <label for="input"></label><input id="input" name="inputText" type="text" style="width: 20%; height: 90px; font-size: 15px">
- </input>
- <a href="javascript:" onclick="generate()">生成</a>
- </div>
- <script src="https://d3js.org/d3.v3.min.js"></script>
- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
-
- <script>
-
- var stuName = document.getElementById('input')
-
- function generate() {
- fetchData(stuName.value)
- }
-
- var nodes = {}
-
- var width = 7680,
- height = 4320
- var svg
-
- function fetchData(value) {
- const schoolList = {
- array:
- value || "海洋"
- }
- nodes = {}
- $.ajax({
- type: 'POST',
- url: 'http://127.0.0.1:6009/search',
- contentType: 'application/json', //必须这样写
- dataType: 'json',
- data: JSON.stringify(schoolList), //schoolList是你要提交是json字符串
- success: data => {
- links = data.prediction
- links.forEach(function (link) {
- link.source = nodes[link.source] || (nodes[link.source] = { name: link.source })
- link.target = nodes[link.target] || (nodes[link.target] = { name: link.target })
- // link.rela = nodes[link.rela] || (nodes[link.rela] = { name: link.rela })
- })
-
- render(links)
- },
- error: function (err) {
- console.log(err)
- },
- })
- }
-
- $(function () {
- fetchData()
- })
-
- function render(dataSource)
- {
- console.log('render', dataSource)
- console.log('nodes', nodes)
- d3.select('svg').remove()
- svg = d3.select('body').append('svg').attr('width', width).attr('height', height)
- var force = d3.layout
- .force()
- .nodes(d3.values(nodes))
- .links(dataSource)
- .size([width, height])
- .linkDistance(96)
- .charge(-1200)
- .on('tick', tick)
- .start()
-
- svg
- .append('marker')
- .attr('id', 'resolved')
- .attr('markerUnits', 'userSpaceOnUse')
- .attr('viewBox', '0 -500 100 100')
- .attr('refX', 6)
- .attr('refY', -1)
- .attr('markerWidth', 12)
- .attr('markerHeight', 12)
- .attr('orient', 'auto')
- .attr('stroke-width', 2)
- .append('path')
- .attr('d', 'M0,-5L10,0L0,5')
- .attr('fill', '#000000');
-
- var edges_line = svg
- .selectAll('.edgepath')
- .data(force.links())
- .enter()
- .append('path')
- .attr({
- d: function (d) {
- return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y
- },
- class: 'edgepath',
- id: function (d, i) {
- return 'edgepath' + i
- },
- })
- .style('stroke', function (d) {
- var lineColor
- lineColor = '#B43232'
- return lineColor
- })
- .style('pointer-events', 'none')
- .style('stroke-width', 0.5)
- .attr('marker-end', 'url(#resolved)')
-
- var edges_text = svg
- .append('g')
- .selectAll('.edgelabel')
- .data(force.links())
- .enter()
- .append('text')
- .style('pointer-events', 'none')
- .attr({
- class: 'edgelabel',
- id: function (d, i) {
- return 'edgepath' + i
- },
- dx: 48,
- dy: 10,
- })
-
- edges_text
- .append('textPath')
- .attr('xlink:href', function (d, i) {
- return '#edgepath' + i
- })
- .style('pointer-events', 'none')
- .text(function (d) {
- return d.rela
- })
-
- var circle = svg
- .append('g')
- .selectAll('circle')
- .data(force.nodes())
- .enter()
- .append('circle')
- .style('fill', function (node) {
- var color
- var link = dataSource[node.index]
- color = '#F9EBF9'
- return color
- })
- .style('stroke', function (node) {
- var color
- var link = dataSource[node.index]
- color = '#A254A2'
- return color
- })
- .attr('r', 32)
- .on('click', function (node) {
- edges_line.style('stroke-width', function (line) {
- console.log(line)
- if (line.source.name === node.name || line.target.name === node.name) {
- return 8
- } else {
- return 0.5
- }
- })
- })
- .call(force.drag)
-
- var text = svg
- .append('g')
- .selectAll('text')
- .data(force.nodes())
- .enter()
- .append('text')
- .attr('dy', '.35em')
- .attr('text-anchor', 'middle')
- .style('fill', function (node) {
- var color
- var link = dataSource[node.index]
- color = '#ff6700'
- return color
- })
- .attr('x', function (d) {
- var re_en = /[a-zA-Z]+/g
- if (d.name.match(re_en)) {
- d3.select(this)
- .append('tspan')
- .attr('x', 0)
- .attr('y', 2)
- .text(function () {
- return d.name
- })
- } else if (d.name.length <= 6) {
- d3.select(this)
- .append('tspan')
- .attr('x', 0)
- .attr('y', 2)
- .text(function () {
- return d.name
- })
- } else {
- var top = d.name.substring(0, 6)
- var bot = d.name.substring(6, d.name.length)
-
- d3.select(this).text(function () {
- return ''
- })
-
- d3.select(this)
- .append('tspan')
- .attr('x', 0)
- .attr('y', -7)
- .text(function () {
- return top
- })
-
- d3.select(this)
- .append('tspan')
- .attr('x', 0)
- .attr('y', 8)
- .text(function () {
- return bot
- })
- }
- })
-
- function tick() {
- circle.attr('transform', transform1)
- text.attr('transform', transform2)
-
- edges_line.attr('d', function (d) {
- return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y
- })
-
- edges_text.attr('transform', function (d, i) {
- if (d.target.x < d.source.x) {
- bbox = this.getBBox()
- rx = bbox.x + bbox.width / 2
- ry = bbox.y + bbox.height / 2
- return 'rotate(180 ' + rx + ' ' + ry + ')'
- } else {
- return 'rotate(0)'
- }
- })
- }
-
- function linkArc(d) {
- return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y
- }
-
- function transform1(d) {
- return 'translate(' + d.x + ',' + d.y + ')'
- }
-
- function transform2(d) {
- return 'translate(' + d.x + ',' + d.y + ')'
- }
- }
-
- </script>
- </body>
|