Wie erstellt man Elemente abhängig von Daten in D3?

Question

bei sample suchen:

d3.select("body").selectAll("div") 
    .data([4, 8, 15, 16, 23, 42]) 
    .enter().append("div") 
    .text(function(d) { return d; }); 

kann nicht helfen, aber frage mich, wie man zur Verfügung gestellten Daten empfindlich anhängen machen - sagen do append and fill text mit einigen Prädikat sagen if d == 8 othervise anhängen nicht?

Answer 1

Der einfachste Weg ist Ihr Array zu filtern, bevor .data(...) Aufruf:

d3.select("body").selectAll("p") 
    .data([4, 8, 15, 16, 23, 42].filter(function(d){ return d < 10; })) 
    .enter().append("div") 
    .text(function(d) { return d; }); 

nur ein div erstellen wird für 4 und 8

Alternativ können Sie Ihre Auswahl filtern nach dem Array Elemente verbindlich auf der Seite, um untergeordnete Elemente bedingt zu erstellen:

d3.select("body").selectAll("div") 
    .data([4, 8, 15, 16, 23, 42]) 
    .enter().append("div") 
    .text(function(d) { return d; }) 
.filter(function(d){ return d == 8; }).append("span") 
    .text("Equal to 8")