javascript - 在两列上传播 D3.js 图例

Question

嗨，我有一个非常基本的 D3.js 图例

    svg.append('g')
        .classed('legend-color', true)
        .attr('text-anchor', 'start')
        .attr('transform', 'translate(20,30)')
        .style('font-size', '11px')
        .style('fill', 'rgb(0,0,0)')
        .call(legendOrdinal);

我想将它分成两列，一半一半，否则底部的图例单元格会干扰我的节点。

所以基本上它会从

Category A
Category B
Category C
Category D
Category E
Category F
Category G
Category H

到

    Category A     Category E
    Category B     Category F
    Category C     Category G
    Category D     Category H

Answer 1

使用单列图例，您可以使用以下内容轻松定位每个条目:

.attr("transform", function(d,i) {  "translate(10," + (i * 20) +")" });

要定位多列(同时定位多行)，我们需要调整变换的 x 值并根据列调整 y 值。最直接的方法可能是对 x 和 y 使用以下内容:

x = Math.floor(i/c) * w + tx
y = i % c * h + ty

其中 c 是列数，w 是每个图例条目的宽度，tx 是所有图例条目的基数水平翻译，h 是图例条目的高度，ty 是基础量，所有图例条目都垂直翻译。

您可以通过以下函数实现上述功能:

function position(d,i) {
  var c = 2;   // number of columns
  var h = 20;  // legend entry height
  var w = 150; // legend entry width (so we can position the next column) 
  var tx = 10; // tx/ty are essentially margin values
  var ty = 10;
  var x = i % c * w + tx;
  var y = Math.floor(i / c) * h + ty;
  return "translate(" + x + "," + y + ")";
}

var entries = "ABCDEFGHIJ".split("");
var color = d3.schemeCategory10;

var n = Math.round(entries.length/2);
var w = 100;
var h = 20;

var svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height",200);
  
var legend = svg.selectAll("g")
  .data(entries)
  .enter()
  .append("g")
  .attr("transform", position)
  
legend.append("text")
  .attr("x", 18)
  .attr("y", 12)
  .text(function(d) { return "Category " + d; });

legend.append("rect")
  .attr("width",10)
  .attr("height",10)
  .attr("fill",function(d,i) { return color[i]; })
  
  
function position(d,i) {
  var c = 2;   // number of columns
  var h = 20;  // height of each entry
  var w = 150; // width of each entry (so you can position the next column)
  var tx = 10; // tx/ty are essentially margin values
  var ty = 10;
  var x = i % c * w + tx;
  var y = Math.floor(i / c) * h + ty;
  return "translate(" + x + "," + y + ")";
}
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

或者，您可以通过压缩来缩短它:

var entries = "ABCDEFGHIJ".split("");
var color = d3.schemeCategory10;

var svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height",200);
  
var legend = svg.selectAll("g")
  .data(entries)
  .enter()
  .append("g")
  .attr("transform", function(d,i) {
    return "translate(" + (i % 2 * 150 + 10) + "," + (Math.floor(i / 2) * 20 + 10) + ")";
  })
  
legend.append("text")
  .attr("x", 18)
  .attr("y", 12)
  .text(function(d) { return "Category " + d; });

legend.append("rect")
  .attr("width",10)
  .attr("height",10)
  .attr("fill",function(d,i) { return color[i]; })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

---

如果您希望每一列中的条目是连续的，而不是每一行的条目，我们可以稍微修改一下以指定行数(由您想要的列数和图例数决定)您拥有的元素:Math.ceil(numberEntries/numberColumns)。这可能看起来像:

var entries = "ABCDEFGHIJ".split("");
var color = d3.schemeCategory10;

var n = Math.round(entries.length/2);
var w = 100;
var h = 20;

var svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height",200);
  
var legend = svg.selectAll("g")
  .data(entries)
  .enter()
  .append("g")
  .attr("transform", position)
  
legend.append("text")
  .attr("x", 18)
  .attr("y", 12)
  .text(function(d) { return "Category " + d; });

legend.append("rect")
  .attr("width",10)
  .attr("height",10)
  .attr("fill",function(d,i) { return color[i]; })
  
  
function position(d,i) {
  var c = 3
  var r = Math.ceil(entries.length / c);
  var h = 20;  // height of each entry
  var w = 100; // width of each entry (so you can position the next column)
  var tx = 10; // tx/ty are essentially margin values
  var ty = 10;
  var x = Math.floor(i / r) * w + tx;
  var y = i % r * h + ty;
  return "translate(" + x + "," + y + ")";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

此方法可能导致最后一列只有一个条目，而上面的第一种方法可能导致一行只有一个条目。根据情况，一个或另一个可能更可取