Question

我希望在某些圆圈之间生成线条（或者在这种情况下，圆圈的某些角落），这样在悬停在一个圆圈上时，您会看到指向所有其他圆圈的线条。我的问题是我似乎无法找到如何使用d3访问每个圈子/组的points的相关部分。

我相信我要么需要更改points的数据结构，要么使用d3＆＃39; each，但我不知道如何做到这一点。下面是一个工作示例，但从最后24行代码中可以明显看出，这不是（或者不应该）可扩展的。

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  line{opacity: 0.0;stroke : blue;}
  g:hover line{opacity: 1.0;}
</style>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.15/d3.min.js"></script>
  <script>
    var svg = d3.select("body").append("svg")
      .attr("width",  500)
      .attr("height", 500)

    var x = d3.scale.linear().domain([0,1]).range([0, 500]);
    var y = d3.scale.linear().domain([0,1]).range([500, 0]);

    d3.csv('input_data.csv', function(error,data){
      if (error) throw error;

      var circles = svg.selectAll("g")
        .data(data).enter().append("g")
        .attr("id",function(d,i){return "group"+i;})
        .append("circle")
        .attr('cx',function(d){return x(d.x);})
        .attr('cy',function(d){return y(d.y);})
        .attr('r',50);  

      //generating points which I want to connect with one line
      //per 2 xy coordinates
      var points = [];
      for (var i=0;i<data.length;i++){    
        points.push([])
        for (var j = 0; j < data.length; j++) {
          points[i].push(
            {'xval':[data[i].x,data[j].x],
            'yval':[data[i].y,data[j].y]}
          );
        }
      }
      //attempt at drawing some of these lines
      svg.selectAll("#group0").selectAll("line")
        .data(points).enter().append("line")
        .attr("x1",function(d,i){return x(d[0].xval[0]);})
        .attr("x2",function(d,i){return x(d[0].xval[1]);})
        .attr("y1",function(d,i){return y(d[0].yval[0]);})
        .attr("y2",function(d,i){return y(d[0].yval[1]);});
      svg.selectAll("#group1").selectAll("line")
        .data(points).enter().append("line")
        .attr("x1",function(d,i){return x(d[1].xval[0]);})
        .attr("x2",function(d,i){return x(d[1].xval[1]);})
        .attr("y1",function(d,i){return y(d[1].yval[0]);})
        .attr("y2",function(d,i){return y(d[1].yval[1]);});
      svg.selectAll("#group2").selectAll("line")
        .data(points).enter().append("line")
        .attr("x1",function(d,i){return x(d[2].xval[0]);})
        .attr("x2",function(d,i){return x(d[2].xval[1]);})
        .attr("y1",function(d,i){return y(d[2].yval[0]);})
        .attr("y2",function(d,i){return y(d[2].yval[1]);});
      svg.selectAll("#group3").selectAll("line")
        .data(points).enter().append("line")
        .attr("x1",function(d,i){return x(d[3].xval[0]);})
        .attr("x2",function(d,i){return x(d[3].xval[1]);})
        .attr("y1",function(d,i){return y(d[3].yval[0]);})
        .attr("y2",function(d,i){return y(d[3].yval[1]);});

    });
  </script>
</body>

在给定文件input_data.csv的情况下，此代码应该是我想要的最小的独立示例：

x,y
0.5,1.0
0.0,0.5
1.0,0.5
0.5,0.0

Answer 1

保持目前的方法，如何：

  circles.each(function(d0){
    var self = this;
    var group = d3.select(self.parentNode);
    circles.each(function(d1){
      if (self !== this){
        group.append("line")
          .attr("x1",function(d,i){return x(d0.x);})
          .attr("x2",function(d,i){return x(d1.x);})
          .attr("y1",function(d,i){return y(d0.y);})
          .attr("y2",function(d,i){return y(d1.y);});
      }
    });

完整代码here。

而不是预先绘制所有线条，您可能需要考虑在鼠标悬停时绘制它们并在mouseout上删除它们。随着点数的增加，它在记忆中可能会更容易。这看起来像是：

    // draw circles...
    .on('mouseover', function(d0){
      var self = this;
      var group = d3.select(self.parentNode);
      circles.each(function(d1){
        if (self !== this){
          group.append("line")
            .attr("x1",function(d,i){return x(d0.x);})
            .attr("x2",function(d,i){return x(d1.x);})
            .attr("y1",function(d,i){return y(d0.y);})
            .attr("y2",function(d,i){return y(d1.y);});
        }
      });
    })
    .on('mouseout', function(d){
      var self = this;
      var group = d3.select(self.parentNode);
      group.selectAll('line').remove();
    });

完整代码here

每个点

1 个答案: