我正在使用这个伟大的例子来创建维恩图: http://bl.ocks.org/christophe-g/b6c3135cc492e9352797
我目前正在尝试在所有节点(小圆圈)上放置文本标签,但由于我是D3.js库的新手,因此我很难完成这项工作。 我设法为所有节点分配了一个文本标签(这可以通过用例如Firebug检查HTML代码来看到),但是文本标签没有显示出来。如何在节点上放置可见文本标签?
可以在下面找到文本标签未显示在节点上的代码:
/* Create the text for each individual circle */
pointsEnter.append("text")
.attr("class", "label")
.attr("text-anchor", "middle")
.attr("dy", ".40em")
pointsEnter.selectAll("text.label").data(function(d) {
return [d];
})
.text(function(d) {
return d.name;
})
.attr("x", function(d) {
return d.x
})
.attr("y", function(d) {
return d.y
});
https://jsfiddle.net/ej5uz83n/1/
非常感谢任何帮助。
答案 0 :(得分:0)
现在您正在尝试将文本元素附加到圆圈,但您无法在SVG中执行此操作。解决此问题的最简单方法是为每个g
/ circle
对添加text
元素,然后将其与transform
放在一起:
var points = circleContainer.selectAll("circle.node")
.data(function(d) {
return d.nodes
}, function(d) {
return d.name
});
// group for circle and text
var g = points.enter().append("g");
g.append('circle')
.attr('r', 0)
.attr('class', 'node')
.call(layout.packer().drag);
/* Create the text for each individual circle */
g.append("text")
.attr("class", "label")
.attr("text-anchor", "middle")
.attr("dy", ".40em")
.text(function(d){
return d.name;
})
.style("fill", "black");
g.selectAll("circle").transition()
.duration(isFirstLayout ? 0 : test.duration())
.attr('r', function(d) {
return d.r
});
points.exit().transition()
.attr('r', 0)
.remove();
"自动收报机"功能然后变成:
ticker: function() {
g.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
})
}
更新了fiddle。