Wie Subselection von Daten an untergeordneten Knoten übergeben?

Question

Wenn ich Array wie diese

var ar = [[[1,0],[2,0],[3,0]], [[1,0],[2,0],[3,0]]] 

verschachtelt Ich mag zwei SVG-Elemente erstellen, ist dies leicht

var svg = d3.select('div.main`) 
    .selectAll('svg') 
    .data(ar) 
    .enter() 
    .append('svg') 

Und jetzt will ich Subarrays zu svg Auswahl binden, so etwas wie diese

var g = svg.selectAll('g') 
    .data(function(d,i) {return d[i];}) 
    .enter() 
    .append('g') 

danach werden die angehängten Daten zu g sollte

[[1,0],[2,0],[3,0]] 

Ich weiß, was diese Zeile nicht korrekt ist .data(function(d,i) {return d[i];}) Weiß einfach nicht, wie man es anders erklärt.

Answer 1

Wenn ich die Frage richtig verstanden habe,

Ihr Recht sind, sind die Fragen aus der identifizierten Zeile. Sie müssen d[i] nicht als Daten für die neue Auswahl zurückgeben, d stellt jedes individuelle Datum dar, das mit jedem svg, d[i] nur einen Teil jedes Datums darstellt.

Wenn Sie jedes Datum wollen, in seiner Gesamtheit, hängen nur ag als normal:

var g = svg.append("g"); 

Versuchen console.log auf g.data() und Sie werden sehen, dass Ihre Daten immer noch da ist, wie Sie wollen, wird es an jedem gebunden g.

Sie können dann jedes dieser Bezugselemente, die an jedes g gebunden sind und von jedem svg übertragen werden, als Daten verwenden, um neue Funktionen zu erstellen. Das Übergeben des Datums sieht wie folgt aus: .data(function(d) { return d; }). Das Snippet unten sollte es helfen alle zusammen:

var data = [[[10,10],[30,30],[50,50]], [[10,20],[80,30],[50,60]] ]; 
 

 
var svg = d3.select('body') 
 
    .selectAll('svg') 
 
    .data(data) 
 
    .enter() 
 
    .append('svg') 
 
    .attr("height",100) 
 
    .attr("width",200); 
 
    
 
var g = svg.append("g"); 
 

 
console.log("Data Bound To First G in First SVG:") 
 
console.log(g.data()[0]); 
 
console.log("Data Bound To Second G in Second SVG:") 
 
console.log(g.data()[1]); 
 

 
// Data is now available to make features: 
 
g.selectAll("circle") 
 
    .data(function(d) { return d; }) 
 
    .enter() 
 
    .append("circle") 
 
    .attr("r",10) 
 
    .attr("cx",function(d) { return d[0] }) 
 
    .attr("cy",function(d) { return d[1] });

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