D3-在循環中插入內部元素

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-group的數據（並且有點雜亂）。 如何在正確的.line-group中繪制每個路徑，使其看起來像這樣：

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