Javascript 在D3定向力图中更改箭头标记的方向

我正在尝试在每个链接中插入箭头标记。但是我想改变箭头的方向，使它们朝向每个链接的另一端

代码如下：

    svg.append("svg:defs").selectAll("marker")
        .data(["end"])      // Different link/path types can be defined here
      .enter().append("svg:marker")
        .attr("id", "end")    // This section adds in the arrows
        .attr("viewBox", "0 -5 10 10")
        .attr("refX", 15)
        .attr("refY", -1.5)
        .attr("markerWidth", 6)
        .attr("markerHeight", 6)
        .attr("orient", 180)
      .append("svg:path")
        .attr("d", "M0,-5L10,0L0,5");

    // add the links and the arrows
    var pg = svg.append("svg:g").selectAll("path")
        .data(force.links())
      .enter().append("g");

    var path = pg.append("path")
        .attr("class", "link")
        .attr("marker-end", "url(#end)")

这怎么可能

我试图更改

.attr（“标记结束”，“url（#结束）”）

对于
.attr（“标记结束”、“url（#开始）”）

但后来标记消失了。我想知道的另一件事是，代码的哪一部分定义了链接的曲率，以及如何更改

谢谢。
您应该查看标记的
“orient”
属性：

在您的情况下，类似于：
.attr（“定向”，“自动启动反转”）
或
.attr（“定向”，180）
的方法可以工作

此帖子中可以找到一个示例：

至于曲率，相关部分是

dr = Math.sqrt(dx * dx + dy * dy);

半径dr越大，曲线就越多。
您应该查看标记的
“orient”
属性：

svg.select("defs").append("marker")
    .attr("id", "start")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", -5)
    .attr("refY", 0)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)    
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M0,0L10,-5L10,5");

var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
    .enter().append("svg:path")
    .attr("class", "link")
    .attr("marker-start", "url(#start)")
    .attr("marker-end", "url(#end)");

在您的情况下，类似于：
.attr（“定向”，“自动启动反转”）
或
.attr（“定向”，180）
的方法可以工作

以下是一个例子：

至于曲率，相关部分是

dr = Math.sqrt(dx * dx + dy * dy);

半径dr越大，曲线就越多

svg.select("defs").append("marker")
    .attr("id", "start")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", -5)
    .attr("refY", 0)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)    
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M0,0L10,-5L10,5");

var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
    .enter().append("svg:path")
    .attr("class", "link")
    .attr("marker-start", "url(#start)")
    .attr("marker-end", "url(#end)");


var链接=[
{
“来源”：“哈利”，
“目标”：“萨利”，
“价值”：1.2
},
{
“来源”：“哈利”，
“目标”：“马里奥”，
“价值”：1.3
},
{
“来源”：“莎拉”，
“目标”：“爱丽丝”，
“价值”：0.2
},
{
“来源”：“埃维”，
“目标”：“爱丽丝”，
“价值”：0.5
},
{
“来源”：“彼得”，
“目标”：“爱丽丝”，
“价值”：1.6
},
{
“来源”：“马里奥”，
“目标”：“爱丽丝”，
“价值”：0.4
},
{
“来源”：“詹姆斯”，
“目标”：“爱丽丝”，
“价值”：0.6
},
{
“来源”：“哈利”，
“目标”：“卡罗尔”，
“价值”：0.7
},
{
“来源”：“哈利”，
“目标”：“尼克”，
“价值”：0.8
},
{
“来源”：“Bobby”，
“目标”：“弗兰克”，
“价值”：0.8
},
{
“来源”：“爱丽丝”，
“目标”：“马里奥”，
“价值”：0.7
},
{
“来源”：“哈利”，
“目标”：“林恩”，
“价值”：0.5
},
{
“来源”：“莎拉”，
“目标”：“詹姆斯”，
“价值”：1.9
},
{
“来源”：“罗杰”，
“目标”：“詹姆斯”，
“价值”：1.1
},
{
“来源”：“Maddy”，
“目标”：“詹姆斯”，
“价值”：0.3
},
{
“来源”：“桑尼”，
“目标”：“收到”，
“价值”：0.5
},
{
“来源”：“詹姆斯”，
“目标”：“收到”，
“价值”：1.5
},
{
“来源”：“爱丽丝”，
“目标”：“彼得”，
“价值”：1.1
},
{
“来源”：“约翰”，
“目标”：“彼得”，
“价值”：1.6
},
{
“来源”：“爱丽丝”，
“目标”：“埃维”，
“价值”：0.5
},
{
“来源”：“哈利”，
“目标”：“埃维”，
“价值”：0.1
}
];
var节点={}；
//从链接计算不同的节点。
links.forEach（函数（link）{
link.source=节点[link.source]|
（节点[link.source]={name:link.source}）；
link.target=节点[link.target]|
（节点[link.target]={name:link.target}）；
link.value=+link.value；
});
可变宽度=960，
高度=500；
var-force=d3.layout.force（）
.节点（d3.值（节点））
.链接（links）
.尺寸（[宽度、高度]）
.linkDistance（60）
。收费（-300）
.on（“滴答”，滴答）
.start（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
//建造箭头。
追加（“svg:defs”）。选择全部（“标记”）
.data（[“end”]）//可以在此处定义不同的链接/路径类型
.enter（）.append（“svg:marker”）//此部分在箭头中添加
.attr（“id”，字符串）
.attr（“视图框”，“0-5 10”）
.attr（“参考文献”，第15页）
.attr（“参考文献”，-1.5）
.attr（“markerWidth”，6）
.attr（“markerHeight”，6）
.attr（“方向”、“自动”）
.append（“svg:path”）
.attr（“d”，“M0，-5L10,0L0,5”）；
svg.select（“defs”）.append（“marker”）
.attr（“id”、“开始”）
.attr（“视图框”，“0-5 10”）
.attr（“参考文献”，-5）
.attr（“参考文献”，0）
.attr（“markerWidth”，6）
.attr（“markerHeight”，6）
.attr（“方向”、“自动”）
.append（“路径”）
.attr（“d”，“M0,0L10，-5L10,5”）；
//添加链接和箭头
var path=svg.append（“svg:g”）.selectAll（“path”）
.data（force.links（））
.enter（）.append（“svg:path”）
.attr（“类”、“链接”）
.attr（“标记开始”，“url（#开始）”）
.attr（“标记结束”、“url（#结束）”）；
//定义节点
var node=svg.selectAll（“.node”）
.data（force.nodes（））
.enter（）.append（“g”）
.attr（“类”、“节点”）
.呼叫（强制拖动）；
//添加节点
node.append（“圆”）
.attr（“r”，5）；
//添加文本
node.append（“文本”）
.attr（“x”，12）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.name；}）；
//添加曲线
函数tick（）{
attr（“d”，函数（d）{
变量dx=d.target.x-d.source.x，
dy=d.target.y-d.source.y，
dr=Math.sqrt（dx*dx+dy*dy）；
返回“M”+
d、 source.x+“，”+
d、 source.y+“A”+
dr+“，“+dr+”0,1”+
d、 target.x+“，”+
d、 目标.y；
});
节点
.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；}）；
}
path.link{
填充：无；
行程：#666；
笔划宽度：1.5px；
}
圈{
填充：#ccc；
冲程：#fff；
笔划宽度：1.5px；
}
正文{
填写：#000；
字体：10px无衬线；
指针事件：无；
}


var链接=[
{
“来源”：“哈利”，
“目标”：“萨利”，
“价值”：1.2
},
{
“来源”：“哈利”，
“目标”：“马里奥”，
“价值”：1.3
},
{
“来源”：“莎拉”，
“目标”：“爱丽丝”，
“价值”：0.2
},
{
“来源”：“埃维”，
“目标”：“爱丽丝”，
“价值”：0.5
},
{
“来源”：“彼得”，
“目标”：“爱丽丝”，
“价值”：1.6
},
{
“来源”：“马里奥”，
“目标”：“爱丽丝”，
“瓦尔