更改D3方向力图中箭头标记的方向
Change orientation of Arrow Marker in D3 oriented force graph
我正在尝试在每个链接中插入一个箭头标记。但我想改变箭头的方向,使它们面向每个链接的另一端。
这是代码:
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("marker-end", "url(#end)");
对于.attr("marker-end", "url(#start)");
但随后标记物就消失了。我想知道的另一件事是,代码的哪一部分定义了链接的曲率,以及如何更改。
谢谢。
您应该查看标记的"orient"
属性:https://www.w3.org/TR/svg-markers/#OrientAttribute
在您的情况下,类似于.attr("orient", "auto-start-reverse")
或.attr("orient", 180)
的内容会起作用。
在这篇文章中可以找到一个例子:在D3力量布局链接中间显示一个箭头
至于曲率,相关部分为
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 links= [
{
"source": "Harry",
"target": "Sally",
"value": 1.2
},
{
"source": "Harry",
"target": "Mario",
"value": 1.3
},
{
"source": "Sarah",
"target": "Alice",
"value": 0.2
},
{
"source": "Eveie",
"target": "Alice",
"value": 0.5
},
{
"source": "Peter",
"target": "Alice",
"value": 1.6
},
{
"source": "Mario",
"target": "Alice",
"value": 0.4
},
{
"source": "James",
"target": "Alice",
"value": 0.6
},
{
"source": "Harry",
"target": "Carol",
"value": 0.7
},
{
"source": "Harry",
"target": "Nicky",
"value": 0.8
},
{
"source": "Bobby",
"target": "Frank",
"value": 0.8
},
{
"source": "Alice",
"target": "Mario",
"value": 0.7
},
{
"source": "Harry",
"target": "Lynne",
"value": 0.5
},
{
"source": "Sarah",
"target": "James",
"value": 1.9
},
{
"source": "Roger",
"target": "James",
"value": 1.1
},
{
"source": "Maddy",
"target": "James",
"value": 0.3
},
{
"source": "Sonny",
"target": "Roger",
"value": 0.5
},
{
"source": "James",
"target": "Roger",
"value": 1.5
},
{
"source": "Alice",
"target": "Peter",
"value": 1.1
},
{
"source": "Johan",
"target": "Peter",
"value": 1.6
},
{
"source": "Alice",
"target": "Eveie",
"value": 0.5
},
{
"source": "Harry",
"target": "Eveie",
"value": 0.1
}
];
var nodes = {};
// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] ||
(nodes[link.source] = {name: link.source});
link.target = nodes[link.target] ||
(nodes[link.target] = {name: link.target});
link.value = +link.value;
});
var width = 960,
height = 500;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(60)
.charge(-300)
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// build the arrow.
svg.append("svg:defs").selectAll("marker")
.data(["end"]) // Different link/path types can be defined here
.enter().append("svg:marker") // This section adds in the arrows
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5");
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");
// add the links and the arrows
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)");
// define the nodes
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.call(force.drag);
// add the nodes
node.append("circle")
.attr("r", 5);
// add the text
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
// add the curvy lines
function tick() {
path.attr("d", function(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" +
d.source.x + "," +
d.source.y + "A" +
dr + "," + dr + " 0 0,1 " +
d.target.x + "," +
d.target.y;
});
node
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"; });
}
path.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
circle {
fill: #ccc;
stroke: #fff;
stroke-width: 1.5px;
}
text {
fill: #000;
font: 10px sans-serif;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
相关文章:
- ng映射方向备选方案
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)
- 如何在d3.js中返回路径的y坐标
- d3基于用户选择动态更新节点
- 有条件更新d3.js力图中节点的最佳方法
- 为什么我的d3.jsselectAll+过滤器没有过滤
- RubyonRails——构建交互式接口应该朝哪个方向发展
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 使用D3.js计算带有字母间距的文本长度
- d3中堆栈函数和嵌套函数之间的差异
- D3.js模式不适用于弧形或圆环图
- d3.js Chord图的动态工具提示
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 更改D3方向力图中箭头标记的方向
- 当方向为顶部时,如何在 d3 js 中定义 ticksize 参数
- D3:方向图类似于树形布局,但带有反向链接
- 在D3中将堆叠条形图的方向从垂直改为水平
- D3鼠标滚轮缩放方向
- D3.js动画线条绘制按预期以相反的方向进行