我無法在 D3.js 網路圖中的矩形節點內顯示文本。
我首先為每個陣列元素創建了組，并附加了矩形節點，但沒有任何顯示是徒勞的。任何人都可以查看我的代碼并建議任何更改以便代碼可以作業嗎？
我問這個問題是因為我已經實作了之前在 Stackoverflow 中發布的大部分答案，但是根本沒有顯示節點。
網路.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}
]
}
結果似乎只是沒有節點的鏈接：
uj5u.com熱心網友回復：
我認為您可能不小心附加了g元素，然后將它們更改為rectthen append text。我不確定這會解決所有問題，但在這里您想要“追加”而不是“加入”：
var rects= textNodes.append("rect")
.attr("width",300)
.attr("height",90)
.style("fill", "#69b3a2")
.attr("stroke","black");
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/371160.html
標籤：javascript d3.js 数据可视化 图形可视化
上一篇：Javascript使陣列中的新元素在arr.push之后出現在不同的索引中（而不是按預期出現在arr.length索引中）
下一篇：修復可滾動熱圖d3中的x軸位置