Fatal编程技术网

Javascript 每个点有多条线

javascript d3.js svg

Javascript 每个点有多条线,javascript,d3.js,svg,Javascript,D3.js,Svg,我希望在一些圆（或者在本例中是圆的一些角）之间生成线，这样在一个圆上悬停时，您将看到指向所有其他圆的线。我的问题是，我似乎无法找到如何使用d3访问每个圆圈/组的点的相关部分 我认为我要么需要更改点的数据结构，要么使用d3的每个，但我不知道如何做到这一点。下面是一个工作示例，但从最后24行代码来看，这显然不是（或不应该）可伸缩的 <!DOCTYPE html> <meta charset="utf-8"> <style> line{opacity: 0.0;

我希望在一些圆（或者在本例中是圆的一些角）之间生成线，这样在一个圆上悬停时，您将看到指向所有其他圆的线。我的问题是，我似乎无法找到如何使用d3访问每个圆圈/组的
点的相关部分

我认为我要么需要更改
点的数据结构
，要么使用d3的
每个
，但我不知道如何做到这一点。下面是一个工作示例，但从最后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>



按照您目前的方法，您认为：


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


完整代码



与其预先绘制所有线条，不如考虑在mouseover上绘制它们，然后在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();
    });



完整代码
谢谢，我来看看。另一方面，“保持你目前的方法论”是指我预先画出来的，还是暗示你会做其他事情？如果是这样的话，什么是糟糕的代码？@M.T，我指的是预绘图。请参阅更新，以回答在鼠标上执行此操作的问题。

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