我的強制圖表有兩個問題。第一個問題是鏈接文本的位置。我添加了 50% 的偏移量，以確保每個 linkText 都居中。如果鏈接文本不長，這會很好。但它完全看起來
描述越長越好。
我不確定是否可以計算所需的鏈接文本空間的長度并以某種方式從給定的偏移量中減去它。一般來說，需要的空間量在那里，不知道它是否可以用于進一步的計算。
我的第二個問題與鏈接曲線有關。我添加了那些能夠可視化雙向鏈接。否則，它們將相互重疊。問題是，一旦您使用目標節點并以某種方式拖動它們，目標節點 X 位置小于源節點的 x 位置，linkText 就會錯誤地彎曲。
也許你們有一個想法或提示。
console.log("D3 Forced Layout ready.")
////////////////////////////////////////////////////////////
//////////////////// D3 Forced Graph ///////////////////////
////////////////////////////////////////////////////////////
var data = {
"nodes": [
{ "id": 1 },
{ "id": 2 },
{ "id": 3 },
{ "id": 4 },
{ "id": 5 }
],
"links": [
{ "source": 1, "target": 2, "text": "this description is not centered"},
{ "source": 2, "target": 1, "text": "Shorter description" },
{ "source": 2, "target": 3, "text": "Shorter description" },
{ "source": 3, "target": 4, "text": "even shorter" },
{ "source": 4, "target": 5, "text": "shorter" },
{ "source": 5, "target": 1, "text": "short" }
]
}
initForceLayout()
function initForceLayout() {
let vw = 800
let vh = 800
const svg = d3.select("#chart").append("svg")
.attr("width", vw)
.attr("height", vh)
const forceLayout = svg.append("g")
.attr("id", "forceLayout")
.call(d3.zoom().on("zoom", function (event) {
svg.attr("transform", event.transform)
}))
.on("dblclick.zoom", null)
linksContainer = forceLayout.append("g").attr("class", "linkscontainer")
nodesContainer = forceLayout.append("g").attr("class", "nodesContainer")
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function (d) { return d.id; }).distance(300))
.force('charge', d3.forceManyBody().strength(-400))
.force('center', d3.forceCenter(vw / 2, vh / 2))
link = linksContainer.selectAll("g")
.data(data.links)
.join("g")
.attr("cursor", "pointer")
linkLine = linksContainer.selectAll(".linkPath")
.data(data.links)
.join("path")
.attr("id", function(_,i) {
return "path" i
})
.attr("stroke", "black")
.attr("opacity", 0.75)
.attr("stroke-width", 3)
.attr("fill", "transparent")
linkText = linksContainer.selectAll(".linkLabel")
.data(data.links)
.join("text")
.attr("dy", -10)
.attr("class", "linkLabel")
.attr("id", function (d, i) {return "linkLabel" i })
.text("")
linkText.append("textPath")
.attr("xlink:href", function (_, i) {
return "#path" i
})
.attr("startOffset", "50%")
.attr("opacity", 0.75)
.attr("cursor", "pointer")
.attr("class", "linkText")
.text(function (d) {
return d.text
})
node = nodesContainer.selectAll(".node")
.data(data.nodes, d => d.id)
.join("g")
.attr("class", "node")
.call(d3.drag()
.on("start", function(event, d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
})
.on("drag", function(event, d) {
d.fx = event.x;
d.fy = event.y;
})
.on("end", function(event, d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = undefined;
d.fy = undefined;
})
)
node.selectAll("circle")
.data(d => [d])
.join("circle")
.attr("r", 30)
.attr("fill", "whitesmoke")
.attr("stroke", "white")
.attr("stroke-width", 2)
simulation
.nodes(data.nodes)
.on("tick", function () {
// update link positions
linkLine.attr("d", function (d) {
if (d.target.x > d.source.x) {
var dx = (d.target.x - d.source.x),
dy = (d.target.y - d.source.y),
dr = Math.sqrt(dx * dx dy * dy)
return "M" d.source.x "," d.source.y "A" dr "," dr " 0 0,1 " d.target.x "," d.target.y;
} else if (d.target.x < d.source.x) {
var dx = (d.target.x - d.source.x),
dy = (d.target.y - d.source.y),
dr = Math.sqrt(dx * dx dy * dy)
return "M" d.source.x "," d.source.y "A" dr "," dr " 0 0,1 " d.target.x "," d.target.y;
}
});
// update node positions
node
.attr("transform", function (d) {
return "translate(" d.x ", " d.y ")";
});
linkText.attr("transform", function (d) {
if (d.target.x < d.source.x) {
var bbox = this.getBBox();
rx = bbox.x bbox.width / 2;
ry = bbox.y bbox.height / 2;
return 'rotate(180 ' rx ' ' ry ')';
} else if (d.target.x > d.source.x) {
var bbox = this.getBBox();
rx = bbox.x bbox.width / 2;
ry = bbox.y bbox.height / 2;
return 'rotate(0 ' rx ' ' ry ')';
}
})
})
simulation
.force("link")
.links(data.links)
} :root {
--bs-gradient-dark-right: #141727;
--bs-gradient-dark-left: #3a416f;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: lightgray;
overflow: hidden;
}
.border-radius-lg {
border-radius: 0.75rem;
}
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%; /* aspect ratio */
vertical-align: top;
overflow: hidden;
}
#svg-content-responsive {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}
svg .rect {
fill: gold;
stroke: steelblue;
stroke-width: 5px;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>linkText</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- D3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>uj5u.com熱心網友回復：
解決方案
- 將文本居中對齊：添加的
text-anchor:middle屬性<text />足以使文本居中。
雖然沒有必要，但我還向textPath元素添加了文本長度計算作為資料屬性。有了這個，手動對齊文本也是可能的。
textLink./* ... */.each(function(d,i) {
// ANSWER EDIT: precalculate text width
var thisWidth = this.getComputedTextLength()
d3.select(this).attr('data-text-width', () => thisWidth)
})
- 使用 textPath 修復 180 度旋轉：要正確交換
<textPath />文本的 Y 軸，最好繪制從相反方向開始的路徑，而不是使用transform:rotate(180deg).
復雜的轉換似乎不適用于<textPath />.
在這個答案中，我交換了路徑的源和目標來表達 180 度文本旋轉。
編輯：為避免兩條線相互碰撞，SVG 路徑弧的掃描標志已被修改。標志指示弧的方向。
console.log("D3 Forced Layout ready.")
////////////////////////////////////////////////////////////
//////////////////// D3 Forced Graph ///////////////////////
////////////////////////////////////////////////////////////
var data = {
"nodes": [{
"id": 1
},
{
"id": 2
},
{
"id": 3
},
{
"id": 4
},
{
"id": 5
}
],
"links": [{
"source": 1,
"target": 2,
"text": "this description is not centered"
},
{
"source": 2,
"target": 1,
"text": "Shorter description"
},
{
"source": 2,
"target": 3,
"text": "Shorter description"
},
{
"source": 3,
"target": 4,
"text": "even shorter"
},
{
"source": 4,
"target": 5,
"text": "shorter"
},
{
"source": 5,
"target": 1,
"text": "short"
}
]
}
initForceLayout()
function initForceLayout() {
let vw = 800
let vh = 800
const svg = d3.select("#chart").append("svg")
.attr("width", vw)
.attr("height", vh)
const forceLayout = svg.append("g")
.attr("id", "forceLayout")
.call(d3.zoom().on("zoom", function(event) {
svg.attr("transform", event.transform)
}))
.on("dblclick.zoom", null)
linksContainer = forceLayout.append("g").attr("class", "linkscontainer")
nodesContainer = forceLayout.append("g").attr("class", "nodesContainer")
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {
return d.id;
}).distance(300))
.force('charge', d3.forceManyBody().strength(-400))
.force('center', d3.forceCenter(vw / 2, vh / 2))
link = linksContainer.selectAll("g")
.data(data.links)
.join("g")
.attr("cursor", "pointer")
linkLine = linksContainer.selectAll(".linkPath")
.data(data.links)
.join("path")
.attr("id", function(_, i) {
return "path" i
})
.attr("stroke", "black")
.attr("opacity", 0.75)
.attr("stroke-width", 3)
.attr("fill", "transparent")
linkText = linksContainer.selectAll(".linkLabel")
.data(data.links)
.join("text")
.attr("dy", -10)
.attr("class", "linkLabel")
.attr("id", function(d, i) {
return "linkLabel" i
})
// ANSWER EDIT: added text-anchor middle property
// so that the text is centered properly
.attr('text-anchor', 'middle')
.text("")
linkText.append("textPath")
.attr("xlink:href", function(_, i) {
return "#path" i
})
.attr("opacity", 0.75)
.attr("cursor", "pointer")
.attr("class", "linkText")
.attr('startOffset', '50%')
.text(function(d) {
return d.text
}).each(function(d,i) {
// ANSWER EDIT: precalculate text width
var thisWidth = this.getComputedTextLength()
d3.select(this).attr('data-text-width', () => thisWidth)
})
node = nodesContainer.selectAll(".node")
.data(data.nodes, d => d.id)
.join("g")
.attr("class", "node")
.call(d3.drag()
.on("start", function(event, d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
})
.on("drag", function(event, d) {
d.fx = event.x;
d.fy = event.y;
})
.on("end", function(event, d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = undefined;
d.fy = undefined;
})
)
node.selectAll("circle")
.data(d => [d])
.join("circle")
.attr("r", 30)
.attr("fill", "whitesmoke")
.attr("stroke", "white")
.attr("stroke-width", 2)
simulation
.nodes(data.nodes)
.on("tick", function() {
// update link positions
linkLine.attr("d", function(d) {
const shouldInvert = d.target.x < d.source.x
if (!shouldInvert) {
var dx = (d.target.x - d.source.x),
dy = (d.target.y - d.source.y),
dr = Math.sqrt(dx * dx dy * dy)
return "M" d.source.x "," d.source.y "A" dr "," dr " 0 0,1 " d.target.x "," d.target.y;
} else {
var dx = (d.target.x - d.source.x),
dy = (d.target.y - d.source.y),
dr = Math.sqrt(dx * dx dy * dy)
// ANSWER EDIT: swapped source and target
// ANSWER EDIT2: changed sweep flag 1 to 0
return "M" d.target.x "," d.target.y "A" dr "," dr " 0 0,0 " d.source.x "," d.source.y;
}
});
// update node positions
node
.attr("transform", function(d) {
return "translate(" d.x ", " d.y ")";
});
// ANSWER EDIT: removed 180 degree transform
// this was redundant
})
simulation
.force("link")
.links(data.links)
}:root {
--bs-gradient-dark-right: #141727;
--bs-gradient-dark-left: #3a416f;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: lightgray;
overflow: hidden;
}
.border-radius-lg {
border-radius: 0.75rem;
}
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
/* aspect ratio */
vertical-align: top;
overflow: hidden;
}
#svg-content-responsive {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}
svg .rect {
fill: gold;
stroke: steelblue;
stroke-width: 5px;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>linkText</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- D3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/513942.html
上一篇：D3元素未顯示在DOM中