Javascript 如何在D3节点链接图中绘制多条自边
在节点链接图中的节点上绘制单个自链接可以按如下所述完成: 如果需要在同一节点上绘制多个链接,您会更改什么 我试图根据存在的自链接的数量向其添加“旋转”。 根据链接示例中的代码,我做了以下更改:Javascript 如何在D3节点链接图中绘制多条自边,javascript,d3.js,svg,Javascript,D3.js,Svg,在节点链接图中的节点上绘制单个自链接可以按如下所述完成: 如果需要在同一节点上绘制多个链接,您会更改什么 我试图根据存在的自链接的数量向其添加“旋转”。 根据链接示例中的代码,我做了以下更改: function tick() { link.attr("d", function(d) { var x1 = d.source.x, y1 = d.source.y, x2 = d.target.x, y2 = d.target.y, dx = x2 - x1, dy = y
function tick() {
link.attr("d", function(d) {
var x1 = d.source.x,
y1 = d.source.y,
x2 = d.target.x,
y2 = d.target.y,
dx = x2 - x1,
dy = y2 - y1,
dr = Math.sqrt(dx * dx + dy * dy),
// Defaults for normal edge.
drx = dr,
dry = dr,
xRotation = 0, // degrees
largeArc = 0, // 1 or 0
sweep = 1; // 1 or 0
// Self edge.
if ( x1 === x2 && y1 === y2 ) {
// Fiddle with this angle to get loop oriented.
var index = getIndexOfDuplicateEdge();
var degree = 360 / numberOfDuplicateEdges();
var degreeForIndex = degree * index;
xRotation = degreeForIndex; // Previously: -45;
// Needs to be 1.
largeArc = 1;
// Change sweep to change orientation of loop.
//sweep = 0; // I also tried to change it based on index % 2
// Make drx and dry different to get an ellipse
// instead of a circle.
drx = 30;
dry = 20;
// For whatever reason the arc collapses to a point if the beginning
// and ending points of the arc are the same, so kludge it.
x2 = x2 + 1;
y2 = y2 + 1;
}
return "M" + x1 + "," + y1 + "A" + drx + "," + dry + " " + xRotation + "," + largeArc + "," + sweep + " " + x2 + "," + y2;
});
这不会像预期的那样画出我的椭圆,我找不到处理这个问题的方法。基于此,大弧必须为1。扫掠可以是0或1,并将“镜像”我的省略号。我可以使用90-180之间的X旋转和扫描0/1,这将覆盖我的圆的180度。但是,我没有找到在其他180度位置绘制省略号的方法
自我链接的数量可能会有所不同,我总是希望在省略号之间有“最佳”的分布
理想情况下,它应该如下所示:
我们的想法是将圆圈分成与花瓣一样多的部分。然后计算圆上每个花瓣的起点和终点,并在这些点上拟合椭圆 您可以使用以下代码段来实现这一点:(该函数假定您有一个id为“svgthing”的svg元素)
函数radtodeg(角度){
返回角*(180/数学π);
}
函数花(中心x、中心y、自边数、起始角、结束角、半径、长度){
可变角度扇区=结束角度-开始角度;
var num_points=num_self_边*2;
var angle\ U per\ U point=角度\扇区/num\点;
var angle_per_扇区=angle_per_点*2;
var stru builder=[];
对于(可变角度=开始角度;角度<结束角度;角度+=每个扇区的角度){
var起始扇区角度=角度;
var end_扇形_角度=角度+每个_点的角度;
var mid_扇区角度=角度+每个点的角度/2;
var start_x=中心(半径*数学系数(start_扇区角度));
var start_y=中心_y+(半径*Math.sin(起始扇区角度));
var end_x=中心(半径*数学cos(end_扇形角));
var end_y=中心_y+(半径*数学sin(end_扇形角));
var mid_x=中心x+(半径*数学cos(mid_扇形角));
var mid_y=中心y+(半径*数学sin(mid_扇形角));
str_builder.push(“\n”);
str_builder.push(“\n”);
str_builder.push(“\n”);
str_builder.push(“\n”);
}
str_builder.push(“\n”);
$(“#svgthing”).html(str#u builder.join(“”);
}
花(60,50,8,0,2*Math.PI,50,10);
示例调用将生成一个具有8个花瓣的花
function radtodeg(angle) {
return angle * (180/Math.PI);
}
function flower( center_x, center_y, num_self_edges, start_angle, end_angle, radius, length ) {
var angle_sector = end_angle - start_angle;
var num_points = num_self_edges * 2;
var angle_per_point = angle_sector / num_points;
var angle_per_sector = angle_per_point * 2;
var str_builder = [];
for( var angle = start_angle; angle < end_angle; angle += angle_per_sector ) {
var start_sector_angle = angle;
var end_sector_angle = angle + angle_per_point;
var mid_sector_angle = angle + angle_per_point / 2;
var start_x = center_x + (radius * Math.cos(start_sector_angle));
var start_y = center_y + (radius * Math.sin(start_sector_angle));
var end_x = center_x + (radius * Math.cos(end_sector_angle));
var end_y = center_y + (radius * Math.sin(end_sector_angle));
var mid_x = center_x + (radius * Math.cos(mid_sector_angle));
var mid_y = center_y + (radius * Math.sin(mid_sector_angle));
str_builder.push("<path d='");
str_builder.push("M" + start_x + " " + start_y + ",");
str_builder.push("A " + length + " 1 " + radtodeg(mid_sector_angle) + " 0 1 " + end_x + " " + end_y);
str_builder.push("'/>\n");
str_builder.push("<circle cx='" + start_x + "' cy='" + start_y + "' r='5' />\n");
str_builder.push("<circle cx='" + end_x + "' cy='" + end_y + "' r='5'/>\n");
str_builder.push("<circle cx='" + mid_x + "' cy='" + mid_y + "' r='5'/>\n");
}
str_builder.push("<circle cx='" + center_x + "' cy='" + center_y + "' r='" + radius + "' />\n");
$("#svgthing").html(str_builder.join(""));
}
flower(60, 50, 8, 0, 2 * Math.PI, 50, 10);