Erstellen einer Legende mit d3.js

Ich fühle mich wie ich bin hier ineffizient. Ich versuche eine Legende aus einem Array zu erstellen und es scheint, als würde ich zu viel schreiben, um dies zu tun. Kann mir jemand sagen, ob es optimiert werden kann?Erstellen einer Legende mit d3.js

http://jsbin.com/foqesivice/edit?js,console,output

var data = [ 
    {name: "AnotherLong"}, 
    {name: "BigData"}, 
    {name: "What"}, 
    {name: "Something"}, 
    {name: "Smalls"} 
]; 

var margin = {top: 10, right: 10, bottom: 10, left: 10}; 

var color = d3.scale.category20c(); 

var svg = d3.select("body").append("svg") 
    .attr("width", 400 - margin.left - margin.right) 
    .attr("height", 1000 - margin.top - margin.bottom) 

var g = svg.selectAll(".row") 
    .data(data) 
    .enter().append("svg:g") 

var rectangles = g.selectAll(".cell") 
    .data(data) 
    .enter().append("svg:rect") 
    .attr("width", 19) 
    .attr("height", 19) 
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }) 
    .style("fill", function(d, i){return color(i);}) 

var text = g.selectAll(".text") 
    .data(data) 
    .enter().append("svg:text") 
    .attr("x", 24) 
    .attr("y", 9) 
    .attr("dy", ".35em") 
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }) 
    .text(function(d){return d.name;})

EDIT:

andere Sache, die mich stört. Es scheint, dass mein Styling aus irgendeinem Grund sehr fett ist. Ich habe keine Stile definiert. Ist das Standardverhalten?

Quelle

2016-10-06 konrad

@ MatthewWilcoxson Antwort ist gut, aber hier ist eine weitere d3 spezifische re-write. Im Wesentlichen haben die Daten nicht doppelt binden, halten Sie die g, binden Sie darauf, dass die Position und die rect und text, um es hinzuzufügen:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var data = [{ 
 
     name: "AnotherLong" 
 
    }, { 
 
     name: "BigData" 
 
    }, { 
 
     name: "What" 
 
    }, { 
 
     name: "Something" 
 
    }, { 
 
     name: "Smalls" 
 
    }]; 
 

 
    var margin = { 
 
     top: 10, 
 
     right: 10, 
 
     bottom: 10, 
 
     left: 10 
 
    }; 
 

 
    var color = d3.scale.category20c(), 
 
     cellDim = 19; 
 

 
    var svg = d3.select("body").append("svg") 
 
     .attr("width", 400 - margin.left - margin.right) 
 
     .attr("height", 1000 - margin.top - margin.bottom); 
 

 
    var g = svg.selectAll(".row") 
 
     .data(data) 
 
     .enter().append("svg:g") 
 
     .attr("transform", function(d, i) { 
 
     return "translate(" + (0) + "," + ((cellDim + 1) * i) + ")" 
 
     }); 
 

 
    g.append("svg:rect") 
 
     .attr("width", cellDim) 
 
     .attr("height", cellDim) 
 
     .style("fill", function(d, i) { 
 
     return color(i); 
 
     }); 
 

 
    g.append("text") 
 
     .attr("dy", "1em") 
 
     .attr("dx", cellDim + 2) 
 
     .text(function(d) { 
 
     return d.name; 
 
     }); 
 
     
 
    </script> 
 
</body> 
 

 
</html>

Quelle

2016-10-06 20:18:45 Mark

Ja, deine Antwort scheint mir besser zu sein und sieht mehr wie Dinge aus, an denen ich mit d3 gearbeitet habe. Vielen Dank! – konrad

Zuerst verschieben Sie alle Messungen und Werte an den Anfang der Datei und auf sie verweisen (das nur macht die Dinge besser lesbar)

var legend_row_height = 50;

Sie brauchen nicht die g Elemente zu erstellen. Positionieren Sie die Rechtecke und Text mit x,y Attribute statt Übersetzungen:

.attr("y", function(d,i){return legend_row_height * i;})

Und Ihr Styling in CSS bewegen. Dies geschieht am einfachsten, indem Klassen auf den Objekten erreicht:

.classed("squares", 1)

dann CSS hinzufügen:

.squares { 
    stroke: white; 
}

Quelle

2016-10-06 18:04:15

Tat Sir, Sie haben Recht auf alle Konten. Ich habe die "g" -Erstellung losgeworden und auch den 'attr (" y ")' nach Ihrem Vorschlag verwendet. Auch das Entfernen des "g" -Blocks scheint den "fett" -Effekt behoben zu haben. – konrad

Erstellen einer Legende mit d3.js

Antwort

Verwandte Themen