我一直在使用this d3 project的示例代碼來學習如何顯示d3圖形，我似乎無法讓文本顯示在圓圈中間（類似於this example和this example）。我看其他的例子，並嘗試添加d3節點標記
node.append("title").text("Node Name To Display")
和
node.append("text")
.attr("text-anchor", "middle")
.attr("dy", ".3em").text("Node Name To Display")
節點被定義之後，但唯一的結果我看到的是「節點名稱，顯示」被顯示出來，當我徘徊在每個節點上。它沒有顯示爲圈內的文字。我是否必須編寫自己的svg文本對象，並根據圓的半徑座標確定需要放置的座標？從另外兩個例子來看，似乎D3已經在某種程度上關注了這一點。我只是不知道調用/設置的正確屬性。
有lots of examples展示如何添加標籤，圖表和樹的可視化，但我可能會用這個作爲一個最簡單的開始：
您還沒有貼鏈接到您的代碼，但我猜node是指一個SVG圈元素的選擇。您不能將文本元素添加到圓形元素，因爲圓形元素不是containers;將一個文本元素添加到圓圈將被忽略。
通常，您使用G元素爲每個節點分組一個圓形元素（或圖像元素，如上）和文本元素。所得到的結構是這樣的：
<g class="node" transform="translate(130,492)">
<circle r="4.5"/>
<text dx="12" dy=".35em">Gavroche</text>
</g>
使用data-join來爲每個節點創建對於g的元素，然後使用selection.append添加圓圈和每個文本元素。像這樣的：
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("circle")
.attr("r", 4.5);
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
這種方法的一個缺點是，你可能希望標籤繪製在圓的頂部。由於SVG還不支持z-index，因此元素按文檔順序繪製;所以，上述方法導致標籤在其圓圈上方被繪製爲，但是可以在其他圓圈下繪製。您可以通過使用修復這個兩個數據連接和創造界和標籤不同的組，就像這樣：
<g class="nodes">
<circle transform="translate(130,492)" r="4.5"/>
<circle transform="translate(110,249)" r="4.5"/>
…
</g>
<g class="labels">
<text transform="translate(130,492)" dx="12" dy=".35em">Gavroche</text>
<text transform="translate(110,249)" dx="12" dy=".35em">Valjean</text>
…
</g>
和相應的JavaScript：
var circle = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 4.5)
.call(force.drag);
var text = svg.append("g")
.attr("class", "labels")
.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
這種技術在Mobile Patent Suits示例中使用（與用於創建白色陰影的附加文本元素）。
我發現本指南中試圖完成類似的東西非常有用：
https://www.dashingd3js.com/svg-text-element
基於以上鍊接這段代碼生成圈子標籤：如果你想成長的
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body style="overflow: hidden;">
<div id="canvas" style="overflow: hidden;"></div>
<script type="text/javascript">
var graph = {
"nodes": [
{name: "1", "group": 1, x: 100, y: 90, r: 10 , connected : "2"},
{name: "2", "group": 1, x: 200, y: 50, r: 15, connected : "1"},
{name: "3", "group": 2, x: 200, y: 130, r: 25, connected : "1"}
]
}
$(document).ready(function() {
var width = 2000;
var height = 2000;
var svg = d3.select("#canvas").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var lines = svg.attr("class", "line")
.selectAll("line").data(graph.nodes)
.enter().append("line")
.style("stroke", "gray") // <<<<< Add a color
.attr("x1", function (d, i) {
return d.x
})
.attr("y1", function (d) {
return d.y
})
.attr("x2", function (d) {
return findAttribute(d.connected).x
})
.attr("y2", function (d) {
return findAttribute(d.connected).y
})
var circles = svg.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", function (d, i) {
return d.r
})
.attr("cx", function (d, i) {
return d.x
})
.attr("cy", function (d, i) {
return d.y
});
var text = svg.selectAll("text")
.data(graph.nodes)
.enter()
.append("text");
var textLabels = text
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.text(function (d) { return d.name })
.attr("font-family", "sans-serif")
.attr("font-size", "10px")
.attr("fill", "red");
});
function findAttribute(name) {
for (var i = 0, len = graph.nodes.length; i < len; i++) {
if (graph.nodes[i].name === name)
return graph.nodes[i]; // Return as soon as the object is found
}
return null; // The object was not found
}
</script>
</body>
</html>
節點以適應大型標籤，您可以在繪製SVG文本節點後使用getBBox屬性。以下是我做的，對節點的固定座標列表，以及兩個可能的形狀：
nodes.forEach(function(v) {
var nd;
var cx = v.coord[0];
var cy = v.coord[1];
switch (v.shape) {
case "circle":
nd = svg.append("circle");
break;
case "rectangle":
nd = svg.append("rect");
break;
}
var w = 10;
var h = 10;
if (v.label != "") {
var lText = svg.append("text");
lText.attr("x", cx)
.attr("y", cy + 5)
.attr("class", "labelText")
.text(v.label);
var bbox = lText.node().getBBox();
w = Math.max(w,bbox.width);
h = Math.max(h,bbox.height);
}
var pad = 4;
switch (v.shape) {
case "circle":
nd.attr("cx", cx)
.attr("cy", cy)
.attr("r", Math.sqrt(w*w + h*h)/2 + pad);
break;
case "rectangle":
nd.attr("x", cx - w/2 - pad)
.attr("y", cy - h/2 - pad)
.attr("width", w + 2*pad)
.attr("height", h + 2*pad);
break;
}
});
注意，形狀添加，文字添加，然後形狀定位，以讓文字顯示在最上面。
儘管此鏈接可能會回答問題，但最好在此處包含答案的基本部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 – Whymarrh
@Whymarrh答案已更新 –