附加文本到D3強制佈局圖

我試圖修改這裏的力佈局圖http://bl.ocks.org/mbostock/4062045通過在圓圈內附加文本，但文本沒有出現。我將這段代碼添加到網站上的原始代碼中。附加文本到D3強制佈局圖

node.append("text") 
    .style("text-anchor", "middle") 
    .text(function(d) { return d.name; });

來源

2014-01-13 user3183900

http://bl.ocks.org/MoritzStefaner/1377729 – Jordan

我沒有完整的代碼，但我認爲您將文本添加到圓圈中，並且由於圓圈很小，因此您看不到文本。

現在，你的節點目前是圈子（我只是假設）。如果你想爲每個節點設置圓圈和文本，你的節點應該是g元素（g代表「group」），並且爲每個這樣的g元素分配一個圓圈和一個文本。更多關於，你可以找到here（代碼也包含在那裏）

編輯：一旦你看到標籤，你會喜歡他們在一個很好的方式相對於節點的位置。下面是與定位有關標籤的圖的節點幾乎官方推薦：

對於垂直對齊，使用「DY」屬性：

by default, the baseline of the text is at the origin (bottom-aligned) 
a dy of .35em centers the text vertically 
a dy of .72em places the topline of the text at the origin (top-aligned)

使用em單位是不錯的，因爲它會規模自動根據在字體大小上。如果您不指定單位，則默認爲像素。

水平取向，使用「文本錨點」屬性：

the default is "start" (left-aligned for left-to-right languages) 
"middle" 
"end"

來源

2014-01-13 01:33:20 VividD

無論圓圈的大小，你可以不加圈內的文字元素。當我在[上一個問題]上鍊接到[this example]（http://bl.ocks.org/mbostock/1153292）時（http://stackoverflow.com/questions/21081503/text-not-rendered-in- d3-visualization）我應該強調，它使用組（''）作爲「節點」，然後將圓和文本元素分別添加到組中，而不是將圓自己作爲示例中的「節點」你正在工作。 – AmeliaBR

P.S.我應該澄清，如果你的圓圈足夠大，你仍然可以通過將文本置於圓上（使用CSS文本{text-anchor：middle; alignment-baseline：中間;}'讓它集中在一個點上）。但就瀏覽器而言，圈子和文本必須是兄弟元素，而不是嵌套在一起。 – AmeliaBR

是的，我也應該說圓圈和文本可以單獨生成，沒有g，但在這種情況下，數據綁定必須進行兩次，一次爲圓圈，第二次爲文本。使用g的方法更清潔。爲了鍛鍊，您可以稍後嘗試。你也可以嘗試添加一些圖像，作爲節點的第三個元素。 – VividD

附加文本到D3強制佈局圖

回答

相關問題