D3 - Wie man durch ein Array von Farben iteriert

Question

Ich bin ein sehr Anfänger Programmierer (Betonung sehr). Ich versuche herauszufinden, wie man durch ein Array von Farben iteriert, um drei Rechtecke mit verschiedenen Farben zu erzeugen. Hier ist mein Code so weit:

var dataArray = [5, 11, 18]; 
var colors = ["red", "green", "black"]; 

var svg = d3.select("body").append("svg") 
    .attr("width","2000").attr("height","400"); 

svg.selectAll("rect") 
     .data(dataArray) 
     .enter() 
     .append("rect") 
     .attr("fill", function(d, i) { return colors*i}) //the line of code in question 
     .attr("x", function(d,i) { return 70*i + 50; }) 
     .attr("y", function(d,i) { return d*15; }) 
     .attr("height", function(d,i) { return 500; }) 
     .attr("width", "50"); 
//code end 

Wie Sie sehen können, habe ich versucht, function(d, i) zu verwenden, um durch Array Farben zu durchlaufen, ohne Erfolg. Vollständige Offenlegung: Der obige Code wurde für eine Klasse erstellt, aber diese spezielle Frage ist nicht Teil der Aufgabe. Ich versuche nur ein kleines bisschen jenseits der Aufgabe zu gehen.

Answer 1

Haben Sie versucht, colors[i] statt colors*i zu verwenden? Damit können Sie auf den Wert i zugreifen. (Farben [1] wird 'grün', Farben [0] werden 'rot' usw.)

Answer 2

Die andere Antwort ist richtig, Farben [i] geben Ihnen Ihre Farben, so dass es das Häkchen verdient. Das Update in dieser Antwort gibt Ihnen:

var dataArray = [5, 11, 18]; 
 
var colors = ["red", "green", "black"]; 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width","2000").attr("height","400"); 
 

 
svg.selectAll("rect") 
 
     .data(dataArray) 
 
     .enter() 
 
     .append("rect") 
 
     .attr("fill", function(d, i) { return colors[i]}) 
 
     .attr("x", function(d,i) { return 70*i + 50; }) 
 
     .attr("y", function(d,i) { return d*15; }) 
 
     .attr("height", function(d,i) { return 500; }) 
 
     .attr("width", "50"); 
 
//code end

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

Aber die Resultate, die erste Bar ist die höchste, hat aber den kleinsten Datenwert. Alle Balken sind 500 Pixel hoch, jeder hat einen Teil unterhalb der Kante des SVG.

Ich dachte, ich würde nur ein paar möglichen Verbesserungen auf Ihrem Code hinweisen:

Die Verwendung von function(d,i) ist nur dann notwendig, wenn entweder das aktuelle Element in Ihrer Datenarray (d) oder den aktuellen Zuwachs (i Grabbing), so dass für:

.attr("height", function(d,i) { return 500; }) können Sie: .attr('height',500);

Aber ich bezweifle, dass Sie alle Artikel 500 Pixel hoch (vor allem als sVG-Datei ist nur 400 Pixel hoch) sein wollen. Dies wird besonders deutlich, wenn Sie Margen haben.

Also, für Höhe, können wir die Formel, die Sie derzeit für Ihre Y-Koordinate mit verwenden:

.attr("height", function(d,i) { return d*15; })

Nun müssen wir die Bars am gleichen Punkt enden haben, indem die Position der Manipulation die Oberseite jedes Rechteck: (hinaufgehen d * 15 Pixel von der Unterseite des SVG (die bei 400 ist), in SVG Koordinatenraum 0 ist an der Spitze):

.attr("y", function(d,i) { return 400 - d*15; })

Welche gibt Ihnen:

var dataArray = [5, 11, 18]; 
 
var colors = ["red", "green", "black"]; 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width","2000").attr("height","400"); 
 

 
svg.selectAll("rect") 
 
     .data(dataArray) 
 
     .enter() 
 
     .append("rect") 
 
     .attr("fill", function(d, i) { return colors[i]}) 
 
     .attr("x", function(d,i) { return 70*i + 50; }) 
 
     .attr("y", function(d,i) { return 400-d*15; }) 
 
     .attr("height", function(d,i) { return d*15; }) 
 
     .attr("width", "50");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

Schließlich Zitate umschließen Strings, aber wenn Sie verwenden Zahlen, dann können Sie Drop:

Dieses: .attr("width", "50"); kann .attr("width",50);