将标签放在d3.js中节点的中心

Question

我从d3.js开始,我正在尝试创建一行节点,每个节点都包含一个居中的数字标签.

我能够直观地产生所需的结果,但是我这样做的方式并不是最优的,因为它涉及对每个文本元素的xy坐标进行硬编码.以下是代码:

var svg_w = 800;
var svg_h = 400;
var svg = d3.select("body")
    .append("svg")
    .attr("width", svg_w)
    .attr("weight", svg_h);

var dataset = [];
for (var i = 0; i < 6; i++) {
    var datum = 10 + Math.round(Math.random() * 20);
    dataset.push(datum);
}

var nodes = svg.append("g")
               .attr("class", "nodes")
               .selectAll("circle")
               .data(dataset)
               .enter()
               .append("circle")
               .attr("class", "node")
               .attr("cx", function(d, i) {
                   return (i * 70) + 50;
               })
               .attr("cy", svg_h / 2)
               .attr("r", 20);

var labels = svg.append("g")
                .attr("class", "labels")
                .selectAll("text")
                .data(dataset)
                .enter()
                .append("text")
                .attr("dx", function(d, i) {
                    return (i * 70) + 42
                })
                .attr("dy", svg_h / 2 + 5)
                .text(function(d) {
                    return d;
                });

该node班是我的单独定义自定义CSS类circle的元素,而班级nodes和labels没有被明确定义,他们是从这个借来的答案.

如图所示,每个文本标签的定位都是硬编码的,因此它出现在每个节点的中心.显然,这不是正确的解决方案.

我的问题是,我应该如何正确地将每个文本标签与每个节点圆相关联,以便标签的位置自动与圆的位置一起变化.代码示例非常欢迎概念性解释.

Answer 1

该文本锚属性的工作原理是D3创建的SVG元素如预期.但是,你需要追加text和circle到一个共同的g元素,以确保text和circle彼此居中.

为此,您可以将nodes变量更改为:

var nodes = svg.append("g")
           .attr("class", "nodes")
           .selectAll("circle")
           .data(dataset)
           .enter()
           // Add one g element for each data node here.
           .append("g")
           // Position the g element like the circle element used to be.
           .attr("transform", function(d, i) {
             // Set d.x and d.y here so that other elements can use it. d is 
             // expected to be an object here.
             d.x = i * 70 + 50,
             d.y = svg_h / 2;
             return "translate(" + d.x + "," + d.y + ")"; 
           });

请注意,dataset现在的对象,这样的列表d.y,并d.x可以用来代替只是一个字符串列表中.

然后,使用以下内容替换您的circle和text附加代码:

// Add a circle element to the previously added g element.
nodes.append("circle")
      .attr("class", "node")
      .attr("r", 20);

// Add a text element to the previously added g element.
nodes.append("text")
     .attr("text-anchor", "middle")
     .text(function(d) {
       return d.name;
      });

现在,而不是改变circle你的位置,改变g移动circle和移动的元素的位置text.

这是一个JSFiddle,显示圆圈的居中文本.

如果要将文本放在单独的g元素中以使其始终显示在顶部,则使用第一个元素创建中设置的d.x和d.y值.gtransform

var text = svg.append("svg:g").selectAll("g")
         .data(force.nodes())
         .enter().append("svg:g");

text.append("svg:text")
    .attr("text-anchor", "middle")
    .text(function(d) { return d.name; });

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

Answer 2

最好的答案来自提问者本人:

只是进一步观察:每个文本元素只有.attr("text-anchor","middle"),标签位于水平中间但略微垂直偏离.我通过添加attr("y",".3em")(从d3.js网站上的例子中借用)修复了这个问题,这似乎对任意大小的节点圈都很有用.但是,这个附加属性究竟是什么让我无法理解.当然,它对每个文本元素的y坐标做了一些事情,但为什么.3em特别？这对我来说似乎很神奇......

只需添加.attr("text-anchor", "middle")到每个文本元素.

例:

node.append("text")
    .attr("x", 0)
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d) { return d.name; });