將標籤放置在d3.js節點的中心

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如果改變了移動既circle和text的g元素的位置。

這裏是一個JSFiddle顯示圓圈上居中的文字。

如果您希望您的文字是在一個單獨的g元素，使其始終在頂部出現，然後使用d.x和d.y值在第一g元素的創作設置爲transform文本。

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

該頁面describes what's going on under the svg hood涉及到文本元素。瞭解底層的機器和數據結構幫助我更好地處理了如何修改代碼以使其工作。

Answer 3

最佳答案came from the asker自己：

只是進一步的觀察：只。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; });