Question

我正在尝试修改代码，在我所做的修改中，我无法将文本放在圆圈中间。我尝试了很多东西，我看过几个例子，但它对我不起作用。我该怎么做？我知道它应该在这篇文章中完成，我添加了一个文本标签，但它不起作用。

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

Answer 1

为文本创建另一个选择：

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：这是一个非常通用的答案，只是向您展示如何显示文本。这个答案不会处理大小或过渡等细节，这些细节超出了问题的范围，您必须自己实施。

将文本放在圆圈内。 d3.js

1 个答案: