Wie übergebe ich gebundene Daten an eine Funktion in d3?

Question

Ich versuche, ein kleines Vielfaches Diagramm zu machen, indem ich Mike Bostocks example folge.

In diesem Beispiel wird enter().append("svg") verwendet, um für jeden Datenpunkt ein neues SVG zu erstellen. In jedem SVG würden Sie dann das Diagramm erstellen.

Ich habe Daten, die in einer CSV-Datei, die wie folgt aussieht:

count, radius 
15, 5 
10, 3 

Mit diesen Daten würde Ich mag zwei SVGs erstellen (eine für jeden Datenpunkt), mit dem ersten 15 enthält, Kreise mit jeweils einem Radius von 5, und die zweite Svg mit 10, jeweils mit einem Radius von 3. Ich habe eine Funktion drawCircles, die ich verwenden möchte, um die Kreise basierend auf meinem Datensatz zu zeichnen, aber ich habe Probleme mit der Weitergabe der Daten bis zu meiner Funktion.

Hier ist mein Code:

d3.csv("nations.csv", function(data) { 
var svg = d3.select("body").selectAll("svg") 
    .data(data) 
    .enter().append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom); 

    drawCircles(function (d) {return +d.count;}, function (d) {return  +d.radius;}) 

ich nicht passieren d.count und d.radius durch als Argument für meine drawCircles Funktion scheinen kann. Kann mir bitte jemand helfen?

Answer 1

Hier ist eine sehr d3ish Art und Weise zu tun, was Sie nach:

d3.csv("some.csv", function(d){ 
     // coerce your data to numbers 
     return { 
     count: +d.count, 
     radius: +d.radius 
     } 
    }, 
    function(data){   
     // create your svg for each row of data 
     var s = d3.selectAll("svg") 
     .data(data) 
     .enter() 
     .append("svg") 
     .attr("width", 600) 
     .attr("height", 100); 

     // use a sub-selection to create a circle for each count 
     s.selectAll('circle') 
     .data(function(d){ 
      // the bound data will simply be an array with repeating radius 
      return d3.range(d.count).map(function(_){ return d.radius }); 
     }) 
     .enter() 
     .append('circle') 
     // radius is the same for each circle 
     .attr('r', function(d){ 
      return d; 
     }) 
     // space the circles so they look good; 
     .attr('cx', function(d,i,j){ 
      return ((d + 2) * 2) * i + 10; 
     }) 
     .attr('cy', 50) 
     .style('fill', 'steelblue');   
    }); 

---

Beispiel here.