56

我从 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是我为circle元素单独定义的自定义 CSS 类，而类nodes并labels没有明确定义，它们是从这个答案中借来的。

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

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

4

3 回答 3

69

text-anchor属性在D3 创建的 svg 元素上按预期工作。但是，您需要将 thetext和 the附加circle到一个公共g元素中，以确保 thetext和 thecircle彼此居中。

为此，您可以将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.yand而不仅仅是字符串列表。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的位置。gcircletext

这是一个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 + ")"; 
    });
于 2012-08-08T13:40:58.743 回答
38

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

只是进一步的观察：每个文本元素只有 .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; });
于 2014-06-30T02:00:26.093 回答
4

本页描述了在涉及文本元素时 svg 引擎盖下发生的事情。了解底层机制和数据结构有助于我更好地了解如何修改代码以使其正常工作。

于 2013-07-06T01:48:36.003 回答