D3.js 图表 - 在两行中显示图例

Question

我想在 D3.js 图表顶部的两行中显示 10 个图例元素。我尝试过以下方法

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) +")";
 });
 });

我的目标是，如果“i”计数器超过 5，则更改 y 坐标，以便图例元素出现在 2 行，每行 5 个中。但是上面的代码显示了第二行中的所有图例元素。我确信我在这里错过了一些非常简单的东西！

Answer 1

我的解决方案：将所有内容放入“enter”方法中，并计算偏移量。

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”和“each”部分。

更新的小提琴： http: //jsfiddle.net/v7mkg/1/

副作用; 这个特定的实现可能会创建许多行，但这不是问题的核心。