d3：圖例中下一個元素的位置取決於以前的元素

Question

我想用d3創建圖例。下一個元素的位置應該取決於之前的元素。

對於離我有一個這樣的數組：

var data =["Saudi - Arabia","Russia","Asia","United - States","Australia"]; 

這是我的JavaScript代碼：

   var com_x=0; 
       var com_y=0; 
        var legend = d3.select("#chart").append("svg") 
        .attr("class", "legend") 
        .attr("width", r*3) 
        .attr("height", r *1.5) 
        .selectAll("g") 
        .data(data) 
        .enter().append("g") 

        .attr("transform", function(d,i) { 

         var currentElementLength = data[i].length; 
         var nextElementLength = 0; 

         if(i < data.length-1) 
          { 
          //alert(i) 
           nextElementLength = data[i+1].length; 
          } 
         //alert(currentElementLength+" "+nextElementLength+" "+data[i+1]); 
         if((currentElementLength+nextElementLength) > 16) 
         { 
          x1 = com_x 
          y1 = com_y 
          com_y = com_y+20 
          //alert("One "+i+" "+x1+" "+y1); 

          return "translate(" + x1 + "," + y1 + ")" 
         } 
         else 
         { 
          x1 = com_x 
          y1 = com_y 
          com_x = com_x+80 
          //alert("Two "+i+" "+x1+" "+y1); 
          return "translate(" + x1 + "," + y1 + ")" 
         } 



       }); 


legend.append("rect") 
        /* .attr("x",20) 
        .attr("y",-50) */ 
        .attr("width", 13) 
        .attr("height", 13) 
        .attr("transform", "translate(10,10)") 
        .style("fill", function(d, i) { return color(i); }); 

       legend.append("text") 
        /* .attr("x", 42) 
        .attr("y", -41) */ 
        .attr("dx", -7) 
        .attr("dy", ".20em") 
        .style("font-size", "14px") 
        .attr("transform", "translate(33,20)") 
        .text(function(d,i) { return data[i]; }); 

我提出那樣的話，當前元素+下一個元素是大於16，下一個元件應顯示在下一行。前兩排，我正確地得到了位置。但是對於第三和第四行，x位置出錯了。請檢查下面的鏈接。

Here's my chart！

他們有什麼辦法來動態而不是硬編碼？

任何幫助！

Answer 1

在檢測到元素寬度過寬的情況下，您將com_y增加到下一行的位置，則不會將com_x重置爲0。這就是爲什麼第三排以後的排名錯誤。

if((currentElementLength+nextElementLength) > 16) 
    { 
     x1 = com_x 
     y1 = com_y 
     com_y = com_y+20 
     com_x = 0 // <<---- add this line 
     return "translate(" + x1 + "," + y1 + ")" 
    } 

在一個更一般的點，則可能會發現，使用文本的字符的結果的長度在一些意想不到的結果，如果使用的是一個非固定寬度的字體;有些字符比其他字符寬。如果這成爲一個問題，您可能需要計算文本的像素寬度。有幾個問題涉及到這個特定主題。例如：SVG get text element width