向d3圆添加文本
Adding text to d3 circle
我使用的是这个例子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; });
但我对如何在这些圆圈中添加文本一无所知。
我已经提出了这个和这个答案,但没能成功。问题是,在遵循上面的答案后,我的圆圈卡在了一条对角线上。
有人能告诉我怎么做吗?
另一个接近@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 + ")";
});
已更新块。
问题1:
您在圆圈内制作文本,这是不正确的。
<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
在勾号功能中,您只更新圆圈而不更新文本,您应该同时更新两者:
//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; });
此处的工作代码
- Javascript,将文本添加到具有现有文本节点的元素中
- 选中单选框时,将文本添加到文本框中
- 为未标记的文本添加CSS样式
- 如何将表格中的文本添加到使用按钮输入的文本区域
- 有没有办法将mouseOver上的个人文本添加到完整日历中
- 改变“;onClick"这个jQuery的操作从清除输入文本改为将输入文本添加到下面的列表中
- 如何使用JavaScript将链接文本添加到电子邮件中
- 将动态验证文本添加到自定义jQuery验证规则中
- 将文本添加到每个数组元素的开头
- 单击将按钮中的文本添加到带有jQuery或JS的输入框中
- 通过按钮将不同的文本添加到文本区域-不起作用
- 如何为Fabric.js中的文本添加CSS属性
- 如何将预加载程序文本添加到jQuery Cycle 2中
- Javascript Regex exec 在向搜索文本添加属性/引号后冻结
- 如何在所有浏览器中向文本区域中的选定文本添加 标记
- jQuery将文本添加到放置在表格单元格中的图像中
- D3 垂直条形图为标签文本添加换行符
- 单击时从列表中将文本添加到文本框的方法
- 将文本添加到 D3 圆环图的中心
- 如何将非可变文本添加到javascript打印弹出窗口中