將文字置於圓圈內。 d3.js

我正在嘗試修改代碼，並且在我所做的修改中，我無法將文本置於圓圈中間。我已經嘗試了很多東西，並且看過幾個例子，但它對我不起作用。我該怎麼做？我知道這件事應該完成，我添加一個文本標籤，但它不起作用。將文字置於圓圈內。 d3.js

bubbles.enter().append('circle') 
.classed('bubble', true) 
.attr('r', 0) 
.attr('fill', function (d) { return fillColor(d.group); }) 
.attr('stroke', function (d) { return d3.rgb(fillColor(d.group)).darker(); 
}) 
.attr('stroke-width', 2) 
.on('mouseover', function(){}) 
.on('mouseout', function(){});

http://plnkr.co/edit/2BCVxQ5n07Rd9GYIOz1c?p=preview

來源

2017-06-05 yavg

https://stackoverflow.com/questions/13615381/d3-add-text-to-circle – bryce

@brycedorn我試過了，但沒有成功... http://plnkr.co/edit/2BCVxQ5n07Rd9GYIOz1c?p =預覽 – yavg

的文本創建另一個選擇：

var bubblesText = svg.selectAll('.bubbleText') 
    .data(nodes, function(d) { 
     return d.id; 
    }); 

bubblesText.enter().append('text') 
    .attr("text-anchor", "middle") 
    .classed('bubble', true) 
    .text(function(d) { 
     return d.name 
    })

並將其移動蜱函數內。

這裏是更新plunker：http://plnkr.co/edit/UgDjqNhzbvukTWU6J9Oy?p=preview

PS：這是一個非常通用的答案，只是顯示你如何顯示文本。這個答案不涉及細節，如大小或轉換，這些超出了問題的範圍，而且您必須實施自己。

來源

2017-06-05 23:38:13

太好了，我有個問題，這條線的用途是什麼？另一件我想知道的是如何爲小圈子添加一定大小的文字。（會很好的計算出它們不超過圓的大小，從而確定合適的大小..）manyisimas謝謝。你是拉丁語？ – yavg

正如我在我的文章中告訴你的，這些是不同的問題，如果你發佈關於文本大小的不同問題，這是一個更好的主意。關於這條線，你沒有告訴我你在說什麼（如果你的意思是「拉丁裔」，是的，我是）。 –

我忘了告訴你什麼路線，我會說西班牙語，在即將到來的場合，我們能否用我們的母語來了解彼此？我用英語不太好。bubblesText = svg.selectAll（'。bubbleText'） .data（nodes，function（d）{return d.id;}）; – yavg

將文字置於圓圈內。 d3.js

回答

相關問題