[英]Adding text to d3 circle
I am using this example http://bl.ocks.org/danielatkin/57ea2f55b79ae686dfc7 and I am trying to add some text in the circle. 我正在使用这个例子http://bl.ocks.org/danielatkin/57ea2f55b79ae686dfc7 ,我试图在圆圈中添加一些文字。
This is how the circles are created and placed 这就是圈子的创建和放置方式
var nodes = svg.selectAll("circle")
.data(data);
nodes.enter().append("circle")
.attr("class", function (d, i) { return "circle_"+d.sentiment+" circle_"+i})
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.x; })
.attr("r", function (d) { return d.radius; })
.style("fill", function (d, i) { return colors['default']; })
.on("mouseover", function (d) { showPopover.call(this, d); })
.on("mouseout", function (d) { removePopovers(this, true); })
.call(pulse, function(d){ return d.radius+4; }, function(d){return d.radius; });
But I am getting no clue on how to add text to these circles. 但我不知道如何在这些圈子中添加文字。
I have already reffered this and this answer but couldn't succeed. 我已经提到了这个和这个答案但是没有成功。 The issue is that after following the above answers my circles stuck in a diagonal line.
问题是,在按照上面的答案后,我的圈子陷入了对角线。
Can someone tell me how to do this? 谁能告诉我怎么做?
Another option, close to @cyril's is to use a g
element and place both the circle and text inside. 接近@ cyril的另一个选择是使用
g
元素并将圆圈和文本放在里面。 This saves you the double data-bind and double movement update: 这样可以节省双数据绑定和双移动更新:
var nodes = svg.selectAll("g")
.data(data);
var g = nodes.enter().append("g")
g.append("circle")
.attr("class", function(d) {
return d.ratingCategory;
})
.attr("r", 2)
.attr("id", function(d){return d.objectName;})
.on("mouseover", function(d) {
showPopover.call(this, d);
})
.on("mouseout", function(d) {
removePopovers();
});
g.append("text")
.attr("dx",12)
.attr("dy",".35em")
.text(function(d){
return d.objectName;
});
And update the node position in the tick function as: 并将tick函数中的节点位置更新为:
nodes.each(collide(.2))
.attr("transform", function(d){ //<-- use transform it's not a g
return "translate(" + d.x + "," + d.y + ")";
});
Problem 1: 问题1:
You are making the text within the circle dom, which is not correct. 您正在圆圈dom中制作文本,这是不正确的。
<circle class="Low" cx="521.4462169807987" cy="183.39012004057906" r="10" id="171" data-original-title="" title="" aria-describedby="popover833687"><text dx="12" dy=".35em">171</text></circle>
It should have been this way: 它应该是这样的:
<circle class="ratingCategory1" cx="343.02601945806816" cy="333.91072717787176" r="10" id="9" data-original-title="" title="" aria-describedby="popover766707"></circle>
<text x="317.17351217946583" y="310.10556778212015" dx="12" dy=".35em" class="All-Objects">4</text>
How to do this: 这该怎么做:
nodes.enter().append("circle") //make circle
//.attr("class", "node")
.attr("class", function(d) {
return d.ratingCategory;
})
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
})
.attr("r", 2)
.attr("id", function(d){return d.objectName;})
.on("mouseover", function(d) {
showPopover.call(this, d);
})
.on("mouseout", function(d) {
removePopovers();
})
;
var text = svg.selectAll("text")
.data(data).enter().append("text")
.attr("x", function(d) {
return d.x;
})
.attr("y", function(d) {
return d.y;
})
.attr("dx",12)
.attr("dy",".35em")
.text(function(d){
return d.objectName;
});
Problem 2 问题2
Inside the tick function you are only updating the circle but not the text, you should be updating both: 在tick功能中你只更新圆圈而不是文本,你应该更新两个:
//update circle
d3.selectAll("circle").each(collide(.2))
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; });
//update tick
d3.selectAll("text").each(collide(.2))
.attr("x", function (d) { return d.x -20; })
.attr("y", function (d) { return d.y; });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.