D3 - Erstellen mehrerer Kreise Elemente für jeden Eintrag in Dataset

Question

ich folgende Daten-Set haben:

"data":[ 
      ["1951","306","27","159","34","82","4"], 
      ["1956","426","41","203","47","119","16"], 
      ["1959","562","67","267","48","148","32"], 
      ["1960","605","76","282","54","157","36"], 
      ["1961","665","88","310","57","168","42"], 
      ["1962","749","116","340","60","189","44"], 
      ["1963","847","140","375","63","215","54"], 
      ... 

Der erste Eintrag in jedem Array ist das Jahr. Ich habe 2 Koordinatenachsen erstellt w.r.t. diese Daten. Jetzt möchte ich für jeden dieser Einträge 6 Kreiselemente erstellen. Wie kann ich das eine Variation der folgenden Zeile mit:

var circles = svg.selectAll("circle") 
       .data(data.data) 
       .enter() 
       .append("circle"); 

var circleAttr = circles. //Attributes defined here 

Answer 1

können Sie die .selectAll(...).data(...).enter(...).append(...) Muster verwenden zweimal in einer Reihe, um eine Funktion zu .data Passieren der zweiten (und später) Zeit, wo Sie die Daten akzeptiert die vorherige Ebene und gibt ein Array von Datenelementen für diese Ebene zurück.

Hier ist ein kleines Beispiel Ihrer Daten mit:

var colors = d3.scale.category10().domain([1951, 1963]); 

var data = [ 
    ["1951", "306", "27", "159", "34", "82", "4"], 
    ["1956", "426", "41", "203", "47", "119", "16"], 
    ["1959", "562", "67", "267", "48", "148", "32"], 
    ["1960", "605", "76", "282", "54", "157", "36"], 
    ["1961", "665", "88", "310", "57", "168", "42"], 
    ["1962", "749", "116", "340", "60", "189", "44"], 
    ["1963", "847", "140", "375", "63", "215", "54"] 
]; 

d3.select("body") 
    .append("svg") 
    .attr("width", 1000) 
    .attr("height", 1000) 
    .selectAll("g") 
    .data(data) 
    .enter() 
    .append("g") 
    .selectAll("circle") 
    .data(function(d) { 
    var year = +d[0]; 
    return d.slice(1).map(function(value) { 
     return { 
     year: year, 
     value: +value 
     }; 
    }); 
    }) 
    .enter() 
    .append("circle") 
    .attr("r", 2) 
    .attr("cx", function(d) { 
    return d.value; 
    }) 
    .attr("cy", function(d) { 
    return d.value; 
    }) 
    .attr("fill", function(d) { 
    return colors(d.year); 
    }); 

Demo: https://jsfiddle.net/Dogbert/vvera4w9/