D3.js charts - Показать легенду в двух строках

Question

У меня есть 10 элементов легенды, которые я хочу показать в двух строках поверх диаграммы D3.js. Я попытался следующие

legend.append("rect").attr("width", 20).attr("height", 15).style("fill", function(d) { 
return color(d.packageName); 
}); 

legend.append("text").attr("dx", +25).attr("dy", "0.8em").style("text-anchor","front").style("fill", "#666").text(function(d) { 
return d.packageName; 
}); 

var margin = { 
top: 30, 
right: 20, 
bottom: 30, 
left: 40 
}; 

d3.selectAll(".legend").each(function(d, i) { 
    return d3.selectAll(".legend").attr("transform", i < 6 ? function(d, i) { 
    return "translate(" + ((i * 100) + (diameter/10) - 25) + "," + (+margin.top * 2) +")"; 
    } : function(d, i) { 
    return "translate(" + ((i * 100) + (diameter/10) - 25) + "," + (+margin.top * 4) +")"; 
}); 
}); 

Моя цель состояла в том, чтобы изменить координату, если «я» счетчик пошел 5, так что легенда элементы появляются в 2 ряда 5. Но приведенный выше код показывает все элементы легенды в второй ряд. Я уверен, что я пропустил что-то очень простое здесь!

Answer 1

Мое решение: поместите все в метод ввода и вычислите смещения.

legend = svg.selectAll(".legend").data(data).enter().append("g") 
    .attr("class", "legend") 
    .attr("transform", function(d,i) { 
     xOff = (i % 4) * 50 
     yOff = Math.floor(i/4) * 10 
     return "translate(" + xOff + "," + yOff + ")" 
}); 

Следовательно, вы можете удалить всю «selectAll» и «каждую» часть внизу.

Обновлено Fiddle: http://jsfiddle.net/v7mkg/1/

Побочное действие; эта конкретная реализация может создать много строк, но это не в центре проблемы.