如何將垂直圖例轉換爲水平圖例？

Question

如何將這個垂直圖例轉換爲水平圖例？

var legendDiv = d3.select("#legend"); 

var legendRow = legendDiv.selectAll("test") 
    .data(data) 
    .enter() 
    .append("div") 
    .style("margin-bottom", "2px"); 

legendRow.append("div") 
    .html("&nbsp") 
    .attr("class", "rect") 
    .style("background-color", (d, i) => z(i)); 

legendRow.append("div") 
    .html(d=>d); 

Answer 1

我是編寫此代碼的人，您複製/粘貼（https://stackoverflow.com/a/42381613/5768908）。不幸的是，你忘了粘貼CSS（這對於設計<divs>很重要），使得代碼很難理解其他人試圖提供答案。

如果你想向他們展示並排，這是一種替代方案：

var data = ["foo", "bar", "baz"]; 
 

 
var z = d3.scaleOrdinal(d3.schemeCategory20); 
 

 
var legendDiv = d3.select("#legend"); 
 

 
var legendRow = legendDiv.selectAll("foo") 
 
    .data(data) 
 
    .enter() 
 
    .append("div") 
 

 
var legendRect = legendRow.append("div") 
 
    .html("&nbsp") 
 
    .attr("class", "rect") 
 
    .style("background-color", (d, i) => z(i)); 
 

 
var legendText = legendRow.append("div") 
 
    .attr("class", "text") 
 
    .html(d => d);

.rect { 
 
    min-width: 20px; 
 
    height: 20px; 
 
    float: left; 
 
    margin-right: 5px; 
 
} 
 

 
.text { 
 
    float: left; 
 
    margin-right: 20px; 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<div id="legend"></div>