我正在使用此示例http://bl.ocks.org/danielatkin/57ea2f55b79ae686dfc7,我正在尝试在圈子中添加一些文字。
这是创建和放置圆圈的方式
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; });
但我不知道如何在这些圈子中添加文字。
我已经提到了this和this的答案,但未能成功。问题是,在按照上面的答案后,我的圈子陷入了对角线。
有人可以告诉我该怎么做吗?
答案 0 :(得分:4)
接近@ cyril的另一个选择是使用g
元素并将圆圈和文本放在里面。这样可以节省双数据绑定和双移动更新:
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;
});
并将tick函数中的节点位置更新为:
nodes.each(collide(.2))
.attr("transform", function(d){ //<-- use transform it's not a g
return "translate(" + d.x + "," + d.y + ")";
});
更新了block。
答案 1 :(得分:3)
问题1:
您正在圆圈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>
应该是这样的:
<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>
如何做到这一点:
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;
});
问题2
在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; });
工作代码here