我使用d3.js设置了一个力布局。我定义了箭头标记并将它们附加到链接,如下所示,
container.append("svg:defs").selectAll("marker")
.data(["end"])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 30)
.attr("refY", 0)
.attr("markerWidth", 3)
.attr("markerHeight", 3)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5")
.style("fill","#999");
var link = container.append("g")
.attr("class", "links")
.selectAll(".link")
.data(links)
.enter().append("line")
.attr("class", "link")
.attr("marker-end", "url(#end)")
.style("stroke","#999")
.style("fill","none")
.style("stroke-width", 1.5);
我的tick函数定义为,
function tick(){
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
在我的网络中,我有一些孤立的节点,即没有任何链接的节点。我以链接的源和目标都是节点本身的方式可视化这种节点。因此,在我的网络中,隔离节点实际上也以这种方式具有链接。让我困扰的是,这样的孤立节点也通过箭头标记附加,如下所示。
有没有人对此有一些解决方案?