D3.js 维恩图文本标签答案

【问题标题】：D3.js Venn Diagram Text LabelsD3.js 维恩图文本标签
【发布时间】：2017-05-03 22:19:44
【问题描述】：

我正在使用这个很好的例子来创建维恩图： 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/

非常感谢任何帮助。

【问题讨论】：

标签： javascript d3.js venn-diagram

【解决方案1】：

现在您正试图将一个文本元素附加到一个圆圈中，您无法在 SVG 中执行此操作。修复它的最简单方法是为每个 circle/text 对附加一个 g 元素，然后将它们与 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”函数就变成了：

ticker: function() {
  g.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  })
}

更新fiddle。

【讨论】：