D3 - 在一個循環

Question

甲後續插入內部元件以this question：

我創建一個平行座標D3將表示在幾個品牌的數據圖表。每個品牌在四列中每一列都有一個點，全都包含在g元素內.line-group：

在我之前的問題（與上面鏈接）中，我問如何繪製每個品牌連接四個點的一條路徑，我用下面的代碼做：

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 = []; 
    }; 

這追加像這樣的路徑對SVG：

<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> 

雖然這個工程，這些道路不具有訪問數據連接到。行組（並且有點無組織）。我怎麼可以借鑑它裏面的每個路徑是正確的.line區段組，所以它看起來是這樣，而不是：

<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

這裏有一個快速重構與變革，以操作順序：

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) 
    }); 
}); 

產地：

<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> 

---

全碼：

<!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>