Как создать горизонтальную легенду?

Question

В D3.js, как я могу создать горизонтальную легенду с двумя строками?

Это текущий код JavaScript, который создает легенду:

var legendGroup = svg.append("g") 
    .attr("transform", "translate("+(width-50)+",30)"); 

    var legend = legendGroup.selectAll(".legend") 
    .data(nations.map(d=>d.name)) 
     .enter() 
     .append("g") 
     .attr("transform", (d,i)=>"translate(0," + 20*i + ")") 

    var legendRects = legend.append("rect") 
    .attr("width", 10) 
     .attr("height", 10) 
     .attr("fill", d=> colorScale(d)); 

    var legendText = legend.append("text") 
    .attr("x", 14) 
     .attr("y", 8) 
    .text(d=>d); 

Answer 1

Введенный код размещен столбец, как вы заявили, потому что он переводит каждую часть легенды 20 пикселей ниже последнего: "translate(0," + 20*i + ")". Управляя оператором translate, вы можете создать легенду из 2 строк, если знаете, сколько элементов находится в вашем массиве, хотя даже если вы этого не сделаете, вы можете указать, сколько элементов может быть в каждой строке.

В следующем блоке коды, n относится к скольким элементам должны быть в строке, itemWidth значения пикселя для ширины каждой записи легенды и itemHeight высоты.

Я не знаю, сколько легенда пунктов у вас есть, но вы можете установить его как таковой:

.attr("transform", function(d,i) { return 
       "translate(" + i%n * itemWidth + 
       "," + 
       Math.floor(i/n) * itemHeight + ")"; }) 

Это должно работать так:

var data = ["Cat A","Cat B","Cat C", "Cat D", "Dog A", "Dog B", "Dog C", "Dog D"]; 
 
var n = data.length/2; 
 
var itemWidth =80; 
 
var itemHeight = 18; 
 

 
var svg = d3.select("svg"); 
 

 
var color = d3.scale.category10(); 
 

 

 
var legend = svg.selectAll(".legend") 
 
\t .data(data) 
 
\t .enter() 
 
\t .append("g") 
 
\t .attr("transform", function(d,i) { return "translate(" + i%n * itemWidth + "," + Math.floor(i/n) * itemHeight + ")"; }) 
 
\t .attr("class","legend"); 
 
\t 
 
var rects = legend.append('rect') 
 
\t .attr("width",15) 
 
\t .attr("height",15) 
 
\t .attr("fill", function(d,i) { return color(i); }); 
 
\t 
 
var text = legend.append('text') 
 
\t .attr("x", 15) 
 
\t .attr("y",12) 
 
\t .text(function(d) { return d; });

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

 

 
<svg width="500" height="100"></svg>

---

Редактировать: Вот фрагмент, перемещающий вся горизонтальная легенда (с помощью четырех строк, чтобы показать движение лучше с правой стороны лучше в этой узкой точки зрения) на основе комментариев ниже:

var data = ["Cat A","Cat B","Cat C", "Cat D", "Dog A", "Dog B", "Dog C", "Dog D"]; 
 
var n = data.length/4; 
 
var itemWidth =80; 
 
var itemHeight = 18; 
 
var width = 500; 
 

 
var svg = d3.select("svg"); 
 

 
var color = d3.scale.category10(); 
 

 
var legendGroup = svg.append("g") 
 
    .attr("transform", "translate("+(width-150)+",10)"); 
 

 
var legend = legendGroup.selectAll(".legend") 
 
\t .data(data) 
 
\t .enter() 
 
\t .append("g") 
 
\t .attr("transform", function(d,i) { return "translate(" + i%n * itemWidth + "," + Math.floor(i/n) * itemHeight + ")"; }) 
 
\t .attr("class","legend"); 
 
\t 
 
var rects = legend.append('rect') 
 
\t .attr("width",15) 
 
\t .attr("height",15) 
 
\t .attr("fill", function(d,i) { return color(i); }); 
 
\t 
 
var text = legend.append('text') 
 
\t .attr("x", 15) 
 
\t .attr("y",12) 
 
\t .text(function(d) { return d; });

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

 
<svg width="500" height="200"> </svg>