javascript - 如何创建水平图例？

Question

在 D3.js 中，如何创建 2 行的水平图例？

这是创建图例的当前 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 + ")" .通过操作翻译语句，如果您知道数组中有多少元素，您可以创建一个 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")
	.data(data)
	.enter()
	.append("g")
	.attr("transform", function(d,i) { return "translate(" + i%n * itemWidth + "," + Math.floor(i/n) * itemHeight + ")"; })
	.attr("class","legend");
	
var rects = legend.append('rect')
	.attr("width",15)
	.attr("height",15)
	.attr("fill", function(d,i) { return color(i); });
	
var text = legend.append('text')
	.attr("x", 15)
	.attr("y",12)
	.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>

---

编辑:这是一个移动整个水平图例的片段(使用四行在这个狭窄的 View 中更好地向右侧显示移动)基于下面的评论:

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")
	.data(data)
	.enter()
	.append("g")
	.attr("transform", function(d,i) { return "translate(" + i%n * itemWidth + "," + Math.floor(i/n) * itemHeight + ")"; })
	.attr("class","legend");
	
var rects = legend.append('rect')
	.attr("width",15)
	.attr("height",15)
	.attr("fill", function(d,i) { return color(i); });
	
var text = legend.append('text')
	.attr("x", 15)
	.attr("y",12)
	.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>