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>

完整代码：

＆＃13;

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

＆＃13;

D3 - 在循环中插入元素

1 个答案: