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, следующий элемент должен отображаться в следующей строке. Для первых двух строк я правильно занял позицию. Но для третьего и четвертого ряда положение х идет неправильно. Пожалуйста, проверьте приведенную ниже ссылку.

Это my chart!

Это их способ сделать динамически вместо жесткого кодирования?

Любая помощь !!

Answer 1

В точке, где вы обнаруживаете, что ширина элементов слишком широкая, и вы увеличиваете com_y для позиции на следующей строке, вы не сбрасываете com_x назад до 0. Вот почему 3-я и более поздняя позиции находятся в неправильном положении.

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