Wie wird die vertikale Legende in die horizontale umgewandelt?

Question

Wie kann ich diese vertikale Legende in die horizontale umwandeln?

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

Ich bin derjenige, der diesen Code geschrieben Kopieren/Einfügen (https://stackoverflow.com/a/42381613/5768908). Leider hast du vergessen, auch das CSS einzufügen (was wichtig ist, um die <divs> zu stylen), was den Code für andere Leute schwer verständlich macht, die versuchen, eine Antwort zu geben.

Wenn Sie ihnen zeigen, nebeneinander, dann ist dies eine Alternative:

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>