D3 -

Question

eine Folgenachricht an this question in einer Schleife innerhalb Elemente Einfügen:

I ein parallel bin die Schaffung Koordinaten-Diagramm in D3, die Daten auf mehreren Marken darstellen. Jede Marke hat einen Punkt in jeder von vier Spalten, alle innerhalb des Elements g enthalten. Line-Gruppe:

In meiner vorherigen Frage (oben verlinkt), fragte ich, wie man einen Pfad pro Marke verbindet die vier Punkte, die ich bin unten mit dem Code tun:

var svg = d3.selectAll('svg'), 
     line = d3.svg.line(), 
     circles = svg.selectAll('.line-group') 
        .selectAll('circle'), 
     circleCoords = []; 

    for (i = 0; i < circles.length; i++) { 
     circles[i].forEach(function(d) { 
     var cx = d.getAttribute('cx'), 
      cy = d.getAttribute('cy'); 

     circleCoords.push([cx, cy]); 
     }); 

     svg.append('path') 
     .attr({ 'd' : line(circleCoords) }); 

     circleCoords = []; 
    }; 

Dieser fügt die Pfade zum svg etwa so:

<g class="line-group"> 
    <circle r="5" cx="425.2290564534928" cy="0" data-brand="Brand Y"></circle> 
    <circle r="5" cx="855.0959051939095" cy="59.347826086956466" data-brand="Brand Y"></circle> 
    <circle r="5" cx="1558.2469152243186" cy="229.1306884480747" data-brand="Brand Y"></circle> 
    <circle r="5" cx="2301.687268451202" cy="0" data-brand="Brand Y"></circle> 
</g> 

<g class="line-group"> 
    <circle r="5" cx="339.08350155311" cy="41.49035025017887" data-brand="Brand Z"></circle> 
    <circle r="5" cx="988.2304636988625" cy="161.08695652173915" data-brand="Brand Z"></circle> 
    <circle r="5" cx="1705.337437853109" cy="170.04667444574085" data-brand="Brand Z"></circle> 
    <circle r="5" cx="2088.4372304285025" cy="112.10192697768763" data-brand="Brand Z"></circle> 
</g> 

<path d="M425.2290564534928,0L855.0959051939095,59.347826086956466L1558.2469152243186,229.1306884480747L2301.687268451202,0"></path> 

<path d="M339.08350155311,41.49035025017887L988.2304636988625,161.08695652173915L1705.337437853109,170.04667444574085L2088.4372304285025,112.10192697768763"></path> 

das funktioniert zwar, diese Wege haben keinen Zugriff auf die Daten verbunden. Liniengruppe (und ist ein bisschen unorganisiert). Wie kann ich jeden Pfad zeichnen in der es ist richtig .line-Gruppe, so dass es so aussieht, statt:

<g class="line-group"> 
    <circle r="5" cx="425.2290564534928" cy="0" data-brand="Brand Y"></circle> 
    <circle r="5" cx="855.0959051939095" cy="59.347826086956466" data-brand="Brand Y"></circle> 
    <circle r="5" cx="1558.2469152243186" cy="229.1306884480747" data-brand="Brand Y"></circle> 
    <circle r="5" cx="2301.687268451202" cy="0" data-brand="Brand Y"></circle> 
    <path d="M425.2290564534928,0L855.0959051939095,59.347826086956466L1558.2469152243186,229.1306884480747L2301.687268451202,0"></path> 
</g> 

<g class="line-group"> 
    <circle r="5" cx="339.08350155311" cy="41.49035025017887" data-brand="Brand Z"></circle> 
    <circle r="5" cx="988.2304636988625" cy="161.08695652173915" data-brand="Brand Z"></circle> 
    <circle r="5" cx="1705.337437853109" cy="170.04667444574085" data-brand="Brand Z"></circle> 
    <circle r="5" cx="2088.4372304285025" cy="112.10192697768763" data-brand="Brand Z"></circle> 
    <path d="M339.08350155311,41.49035025017887L988.2304636988625,161.08695652173915L1705.337437853109,170.04667444574085L2088.4372304285025,112.10192697768763"></path> 
</g> 

Answer 1

Hier ist eine schnelle Umgestalten mit einer Änderung der Reihenfolge der Operationen:

var svg = d3.select('svg'), 
    line = d3.svg.line(); 

svg.selectAll('.line-group').each(function(){ 
    var lg = d3.select(this), 
     circleCoords = []; 
    lg.selectAll("circle").each(function(){ 
    var c = d3.select(this), 
     cx = c.attr('cx'), 
     cy = c.attr('cy'); 
    circleCoords.push([cx, cy]); 
    }); 
    lg.append('path') 
    .attr({ 
     'd': line(circleCoords) 
    }); 
}); 

Produziert:

<g class="line-group"> 
    <circle r="5" cx="425.2290564534928" cy="0" data-brand="Brand Y"></circle> 
    <circle r="5" cx="855.0959051939095" cy="59.347826086956466" data-brand="Brand Y"></circle> 
    <circle r="5" cx="1558.2469152243186" cy="229.1306884480747" data-brand="Brand Y"></circle> 
    <circle r="5" cx="2301.687268451202" cy="0" data-brand="Brand Y"></circle> 
    <path d="M425.2290564534928,0L855.0959051939095,59.347826086956466L1558.2469152243186,229.1306884480747L2301.687268451202,0"></path> 
    </g> 
    <g class="line-group"> 
    <circle r="5" cx="339.08350155311" cy="41.49035025017887" data-brand="Brand Z"></circle> 
    <circle r="5" cx="988.2304636988625" cy="161.08695652173915" data-brand="Brand Z"></circle> 
    <circle r="5" cx="1705.337437853109" cy="170.04667444574085" data-brand="Brand Z"></circle> 
    <circle r="5" cx="2088.4372304285025" cy="112.10192697768763" data-brand="Brand Z"></circle> 
    <path d="M339.08350155311,41.49035025017887L988.2304636988625,161.08695652173915L1705.337437853109,170.04667444574085L2088.4372304285025,112.10192697768763"></path> 
    </g> 

---

Voll Code:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
    
 
    <style> 
 
    path { 
 
     fill: none; 
 
     stroke: steelblue 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <svg width="3000" height="600"> 
 
    <g class="line-group"> 
 
     <circle r="5" cx="425.2290564534928" cy="0" data-brand="Brand Y"></circle> 
 
     <circle r="5" cx="855.0959051939095" cy="59.347826086956466" data-brand="Brand Y"></circle> 
 
     <circle r="5" cx="1558.2469152243186" cy="229.1306884480747" data-brand="Brand Y"></circle> 
 
     <circle r="5" cx="2301.687268451202" cy="0" data-brand="Brand Y"></circle> 
 
    </g> 
 

 
    <g class="line-group"> 
 
     <circle r="5" cx="339.08350155311" cy="41.49035025017887" data-brand="Brand Z"></circle> 
 
     <circle r="5" cx="988.2304636988625" cy="161.08695652173915" data-brand="Brand Z"></circle> 
 
     <circle r="5" cx="1705.337437853109" cy="170.04667444574085" data-brand="Brand Z"></circle> 
 
     <circle r="5" cx="2088.4372304285025" cy="112.10192697768763" data-brand="Brand Z"></circle> 
 
    </g> 
 
    </svg> 
 

 
    <script> 
 
    var svg = d3.select('svg'), 
 
     line = d3.svg.line(); 
 

 
    svg.selectAll('.line-group').each(function(){ 
 
     var lg = d3.select(this), 
 
      circleCoords = []; 
 
     lg.selectAll("circle").each(function(){ 
 
     var c = d3.select(this), 
 
      cx = c.attr('cx'), 
 
      cy = c.attr('cy'); 
 
     circleCoords.push([cx, cy]); 
 
     }); 
 
     lg.append('path') 
 
     .attr({ 
 
      'd': line(circleCoords) 
 
     }); 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>