如何在 D3.js 中为网络图的矩形节点添加文本？
Posted
技术标签:
【中文标题】如何在 D3.js 中为网络图的矩形节点添加文本？【英文标题】：how to add text inside a rectangular nodes for a network graph in D3.js? 【发布时间】：2022-01-07 07:57:00 【问题描述】：我无法在 D3.js 网络图中的矩形节点内显示文本。
我首先为每个数组元素创建了组，并附加了矩形节点，但没有任何内容是徒劳的。 任何人都可以查看我的代码并提出任何更改以使代码能够正常工作吗？
我问这个问题是因为我已经实现了之前在 *** 中发布的大部分答案，但是根本没有显示节点。
Network.html：
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>
<body>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
const margin = top: 20, right: 20, bottom: 40, left: 100,
width = 2000 - margin.left - margin.right,
height = 1000 - margin.top - margin.bottom;
// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
//THe SVG-g aelement is used ot group SVG shapes together. Once grouped you can transform the whole group as if it was a single shape.
.append("g") //This mainly appends a 'g' element to the SVG.
.attr("transform",
`translate($margin.left, $margin.top)`); //this is used to move it to the top left position.
d3.json("sample_input.json").then( function( data)
// Initialize the links
const link = svg // we have appended the LINE for each LINK in the data.
.append("g")
.selectAll("line")
.data(data.links)
.enter()
.append("line")
.style("stroke", "#000000");
const simulation = d3.forceSimulation(data.nodes)
.force("link", d3.forceLink()
.id(function(d) return d.id; )
.links(data.links)
)
.force("charge", d3.forceManyBody().strength(-25000))
.force("center", d3.forceCenter(width/2, height/3))
.on("tick", ticked);
var textNodes= svg.append("g") // this is for the second <g>
.selectAll("g")
.data(data.nodes)
.enter().append("g");
var rects= textNodes.join("rect").attr("width",300)
.attr("height",90)
.style("fill", "#69b3a2")
.attr("stroke","black");
var texts= textNodes.append("text")
.text(function(d)
d.label;
);
function ticked()
textNodes.attr("transform",function (d) return "translate("+d.x+", "+d.y+")";);
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; );
);
</script>
</body>
输入json文件：
"nodes": [
"id": 0, "label":"Donald Trump",
"id": 1, "label": "https://www.politifact.com",
"id": 2, "label": "https://www.washingtonpost.com",
"id": 3, "label": "https://www.thedailybeast.com",
"id": 4, "label": "https://www.daytondailynews.com",
"id": 5, "label": "https://centurylink.net",
"id":6, "label": "https://www.businessinsider.com",
"id":7, "label": "https://thehill.com",
"id":8, "label": "https://www.texasstandard.org"
],
"links": [
"source": 1, "target": 0,
"source": 2, "target": 0,
"source": 3, "target": 1,
"source": 4, "target": 0,
"source": 5, "target": 0
]
结果似乎只是没有节点的链接：
【问题讨论】：
【参考方案1】：我认为您可能不小心附加了g 元素，然后将它们更改为rect，然后附加text。我不确定这会解决所有问题，但在这里你想要“追加”而不是“加入”：
var rects= textNodes.append("rect")
.attr("width",300)
.attr("height",90)
.style("fill", "#69b3a2")
.attr("stroke","black");
【讨论】：
以上是关于如何在 D3.js 中为网络图的矩形节点添加文本？的主要内容，如果未能解决你的问题，请参考以下文章