小贝子编程

找到链接标签并将标签与链接一起移动



我正在开发一个关于通过有向图进行模式表示的项目。我已经到了从json加载它的地步，放置节点标签，它们之间的链接，以及在移动节点时链接和节点标签都会移动。然而，我在将链接标签(json中的"类型"(放置在位置(链接的中点(并链接到链接的移动时遇到了困难。有解决和解释的想法吗？谢谢

实际代码可以在链接中找到(https://jsfiddle.net/obordies25/wmLeganx/2/)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>[AF-PATTERN-EDITOR]</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style  id="compiled-css" type="text/css">
.node {
fill:#ccc;
stroke: #fff;
stroke-width: 2px;
}
.node-active {
stroke: #555;
stroke-width: 1.5px;
}
link-active {
stroke: #555;
stroke-opacity: 5;
}
line {
stroke: rgb(212, 212, 212);
stroke-width: 1px;
shape-rendering: crispEdges;
}
.overlay {
fill: none;
pointer-events: all;
}
.link{
stroke: #ccc;
stroke-width: 2px;
}
svg {
box-sizing: border-box;
border: 1px solid rgb(212, 212, 212);
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script  type="text/javascript">
var width = 960,
height = 500,
resolution = 150,
r = 15;
var graph = {
"nodes":  [
{"task": "1", "label": "1", "social": "I", "id": 1, "x": 150, "y": 450},
{"task": "2", "label": "2", "social": "G", "id": 2, "x": 300, "y": 150},
{"task": "3", "label": "3", "social": "T", "id": 3, "x": 450, "y": 300}
],
"links": [
{"source": "1", "target": "2", "type": "N:1"},
{"source": "2", "target": "3", "type": "1:N"},
{"source": "1", "target": "3", "type": "1:1"}
]
}
/*d3.json("graph.json", function (error, graph) {
if (error) throw error;
update(graph.links, graph.nodes);
})*/
var margin = {
top: -5,
right: -5,
bottom: -5,
left: -5
};
var colors = d3.scale.category20();
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
var force = d3.layout.force()
.charge(-200)
.linkDistance(50)
.size([width + margin.left + margin.right, height + margin.top + margin.bottom])
//.nodes(graph.nodes);
var drag = d3.behavior.drag()
.origin(function(d) { return d; })
.on('drag', dragged);
svg.selectAll('.vertical')
.data(d3.range(1, width / resolution))
.enter().append('line')
.attr('class', 'vertical')
.attr('x1', function(d) { return d * resolution; })
.attr('y1', 0)
.attr('x2', function(d) { return d * resolution; })
.attr('y2', height);
svg.selectAll('.horizontal')
.data(d3.range(1, height / resolution))
.enter().append('line')
.attr('class', 'horizontal')
.attr('x1', 0)
.attr('y1', function(d) { return d * resolution; })
.attr('x2', width)
.attr('y2', function(d) { return d * resolution; });
svg.append('defs').append('marker')
.attr({'id':'arrowhead',
'viewBox':'-0 -5 10 10',
'refX':40,
'refY':0,
'orient':'auto',
'markerWidth':5,
'markerHeight':5,
'xoverflow':'visible'})
.append('svg:path')
.attr('d', 'M 0,-5 L 10 ,0 L 0,5')
.attr('fill', '#777')
.style('stroke','none');

var link = svg.selectAll("svg.link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.attr('marker-end','url(#arrowhead)')
.attr("data-source", function (d) {
return d.source;
})
.attr("data-target", function (d) {
return d.target;
})
.attr("x1", function (d) {
for (let node of graph.nodes) {
if (node.task === d.source)
return node.x;
}
})
.attr("x2", function (d) {
for (let node of graph.nodes) {
if (node.task === d.target)
return node.x;
}
})
.attr("y1", function (d) {
for (let node of graph.nodes) {
if (node.task === d.source)
return node.y;
}
})
.attr("y2", function (d) {
for (let node of graph.nodes) {
if (node.task === d.target)
return node.y;
}
})
.style("stroke-width", function(d) {
return Math.sqrt(d.value);
});
var node = svg.selectAll("svg.node")
.data(graph.nodes)
.enter().append('g');
node.append("circle")
.attr("class", "node")
.attr('node-id', d => d.social)
.attr('cx', function(d) { return d.x; })
.attr('cy', function(d) { return d.y; })
.attr('r', r * 2)
.call(drag);//

node.append("text")
.attr("class", "label")
.attr('node-id', d => d.social)
.attr('text-anchor', 'middle')
.attr('alignment-baseline', 'middle')
.attr('dx', function(d) { return d.x; })
.attr('dy', function(d) { return d.y; })
.text(function(d) { return d.social; });
force.on("tick", function () {
link.attr("x1", function (d) { return d.source.x; })
.attr("y1", function (d) { return d.source.y; })
.attr("x2", function (d) { return d.target.x; })
.attr("y2", function (d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
function dragged(d) {
var x = d3.event.x,
y = d3.event.y,
gridX = round(Math.max(r, Math.min(width - r, x)), resolution),
gridY = round(Math.max(r, Math.min(height - r, y)), resolution);
d3.select(this).attr('cx', d.x = gridX).attr('cy', d.y = gridY);
d3.select(this).attr('dx', d.x = gridX).attr('dy', d.y = gridY);
d3.selectAll(`[data-source='${d.task}']`).attr('x1', d.x).attr('y1', d.y);
d3.selectAll(`[data-target='${d.task}']`).attr('x2', d.x).attr('y2', d.y);
d3.select(`text[node-id='${d.social}']`).attr('dx', d.x).attr('dy', d.y)
}
function round(p, n) {
return p % n < n / 2 ? p - (p % n) : p + n - (p % n);
}
</script>
</body>
<html>

将链接标签创建为<g>元素，每个元素下都有一个<circle>和一个<text>：

const links = graph.links.map(l => {
const source = graph.nodes.find(n => n.task === l.source);
const target = graph.nodes.find(n => n.task === l.target);
return {...l, source, target};
});

const linkLabel = svg.selectAll("g.link-label")
.data(links)
.enter()
.append("g")
.classed('link-label', true)
.attr('transform', d => 
`translate(${(d.source.x + d.target.x) / 2},${(d.source.y + d.target.y) / 2})`);

linkLabel.append('circle')
.attr('r', 20);

linkLabel.append('text')
.text(d => d.type)
.attr('text-anchor', 'middle')
.attr('alignment-baseline', 'middle')
.style('stroke', 'none')
.style('fill', 'black')

看看它的工作片段：

var width = 960,
height = 500,
resolution = 150,
r = 15;
var graph = {
"nodes":  [
{"task": "1", "label": "1", "social": "I", "id": 1, "x": 150, "y": 450},
{"task": "2", "label": "2", "social": "G", "id": 2, "x": 300, "y": 150},
{"task": "3", "label": "3", "social": "T", "id": 3, "x": 450, "y": 300}
],
"links": [
{"source": "1", "target": "2", "type": "N:1"},
{"source": "2", "target": "3", "type": "1:N"},
{"source": "1", "target": "3", "type": "1:1"}
]
}
var margin = {
top: -5,
right: -5,
bottom: -5,
left: -5
};
var colors = d3.scale.category20();
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
var force = d3.layout.force()
.charge(-200)
.linkDistance(50)
.size([width + margin.left + margin.right, height + margin.top + margin.bottom])
var drag = d3.behavior.drag()
.origin(function(d) { return d; })
.on('drag', dragged);
svg.selectAll('.vertical')
.data(d3.range(1, width / resolution))
.enter().append('line')
.attr('class', 'vertical')
.attr('x1', function(d) { return d * resolution; })
.attr('y1', 0)
.attr('x2', function(d) { return d * resolution; })
.attr('y2', height);
svg.selectAll('.horizontal')
.data(d3.range(1, height / resolution))
.enter().append('line')
.attr('class', 'horizontal')
.attr('x1', 0)
.attr('y1', function(d) { return d * resolution; })
.attr('x2', width)
.attr('y2', function(d) { return d * resolution; });
svg.append('defs').append('marker')
.attr({'id':'arrowhead',
'viewBox':'-0 -5 10 10',
'refX':40,
'refY':0,
'orient':'auto',
'markerWidth':5,
'markerHeight':5,
'xoverflow':'visible'})
.append('svg:path')
.attr('d', 'M 0,-5 L 10 ,0 L 0,5')
.attr('fill', '#777')
.style('stroke','none');

var link = svg.selectAll("line.link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.attr('marker-end','url(#arrowhead)')
.attr("data-source", function (d) {
return d.source;
})
.attr("data-target", function (d) {
return d.target;
})
.attr("x1", function (d) {
for (let node of graph.nodes) {
if (node.task === d.source)
return node.x;
}
})
.attr("x2", function (d) {
for (let node of graph.nodes) {
if (node.task === d.target)
return node.x;
}
})
.attr("y1", function (d) {
for (let node of graph.nodes) {
if (node.task === d.source)
return node.y;
}
})
.attr("y2", function (d) {
for (let node of graph.nodes) {
if (node.task === d.target)
return node.y;
}
})
.style("stroke-width", function(d) {
return Math.sqrt(d.value);
});   

const links = graph.links.map(l => {
const source = graph.nodes.find(n => n.task === l.source);
const target = graph.nodes.find(n => n.task === l.target);
return {...l, source, target};
});

const linkLabel = svg.selectAll("g.link-label")
.data(links)
.enter()
.append("g")
.attr("class", "link-label")
.attr('transform', d => `translate(${(d.source.x + d.target.x) / 2},${(d.source.y + d.target.y) / 2})`);

linkLabel.append('circle')
.attr('r', 20);

linkLabel.append('text')
.text(d => d.type)
.classed('label', true)
.attr('text-anchor', 'middle')
.attr('alignment-baseline', 'middle')
.style('stroke', 'none')
.style('fill', 'black')

console.log('L: ', graph.links);   

var node = svg.selectAll("svg.node")
.data(graph.nodes)
.enter().append('g');
node.append("circle")
.attr("class", "node")
.attr('node-id', d => d.social)
.attr('cx', function(d) { return d.x; })
.attr('cy', function(d) { return d.y; })
.attr('r', r * 2)
.call(drag);//

node.append("text")
.attr("class", "label")
.attr('node-id', d => d.social)
.attr('text-anchor', 'middle')
.attr('alignment-baseline', 'middle')
.attr('dx', function(d) { return d.x; })
.attr('dy', function(d) { return d.y; })
.text(function(d) { return d.social; });
force.on("tick", function () {
link.attr("x1", function (d) { return d.source.x; })
.attr("y1", function (d) { return d.source.y; })
.attr("x2", function (d) { return d.target.x; })
.attr("y2", function (d) { return d.target.y; });

linkLabel.attr('transform', d => `translate(${(d.source.x + d.target.x) / 2},${(d.source.y + d.target.y) / 2})`);
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
function dragged(d) {
var x = d3.event.x,
y = d3.event.y,
gridX = round(Math.max(r, Math.min(width - r, x)), resolution),
gridY = round(Math.max(r, Math.min(height - r, y)), resolution);
d3.select(this).attr('cx', d.x = gridX).attr('cy', d.y = gridY);
d3.select(this).attr('dx', d.x = gridX).attr('dy', d.y = gridY);
d3.selectAll(`[data-source='${d.task}']`).attr('x1', d.x).attr('y1', d.y);
d3.selectAll(`[data-target='${d.task}']`).attr('x2', d.x).attr('y2', d.y);
d3.select(`text[node-id='${d.social}']`).attr('dx', d.x).attr('dy', d.y)

linkLabel.attr('transform', d => `translate(${(d.source.x + d.target.x) / 2},${(d.source.y + d.target.y) / 2})`);
}
function round(p, n) {
return p % n < n / 2 ? p - (p % n) : p + n - (p % n);
}
.node, .link-label {
fill:#ccc;
stroke: #fff;
stroke-width: 2px;
}
.node-active {
stroke: #555;
stroke-width: 1.5px;
}
link-active {
stroke: #555;
stroke-opacity: 5;
}
line {
stroke: rgb(212, 212, 212);
stroke-width: 1px;
shape-rendering: crispEdges;
}
.overlay {
fill: none;
pointer-events: all;
}
.link{
stroke: #ccc;
stroke-width: 2px;
}
svg {
box-sizing: border-box;
border: 1px solid rgb(212, 212, 212);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium