每个点有多条线
Multiple lines for each point
我希望在某些圆圈（或者在本例中，圆圈的某些角）之间生成线条，这样当将鼠标悬停在一个圆上时，您会看到指向所有其他圆圈的线。我的问题是我似乎找不到如何使用 d3 访问每个圈子/组的points相关部分。
我相信我要么需要更改points的数据结构，要么使用 d3 的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
按照您目前的方法，如何：
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);});
}
});
完整代码在这里。
与其预先绘制所有线条，不如考虑在鼠标悬停时绘制它们并在鼠标退出时删除它们。 随着点数的增加，内存可能会更容易。 这看起来像：
// 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();
});
完整代码在这里
相关文章：
- 没有找到相关文章
