Question

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

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

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类是我为circle元素单独定义的自定义CSS类，而类nodes和labels没有明确定义，它们来自这answer。

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

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

Answer 1

text-anchor属性在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的{{1}}元素的位置。

以下是JSFiddle在圆圈上显示居中文字。

如果您希望将文字放在单独的text元素中，以便它始终显示在顶部，那么请使用第一个{{1}中设置的g和d.x值元素创建到d.y文本。

Answer 2

最好的答案came from the asker自己：

进一步观察：只有.attr（“text-anchor”，“middle”）对于每个文本元素，标签位于水平中间但是略微偏离垂直。我通过添加attr（“y”，“。3em”）修复此问题（借用d3.js网站上的例子），这似乎运作良好即使是任意大小的节点圆。但是，究竟是什么呢额外的属性确实无法理解。当然，确实如此每个文本元素的y坐标，但为什么.3em in 特定？这对我来说似乎很神奇......

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

示例：

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

Answer 3

此页面describes what's going on under the svg hood涉及文本元素。了解底层机制和数据结构有助于我更好地处理如何修改代码以使其正常工作。

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

3 个答案: