垂直凡例を水平凡例に変換するにはどうすればよいですか？

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>