相关疑难解决方法(0)

我一直在研究修改后的力导向图,并且在链接没有正确对齐节点的链接上添加文本/标签时遇到一些问题.怎么解决？

以及如何向SVG文本元素添加事件侦听器？添加.on("dblclick",function(d) {....}只是不起作用.

这是代码片段:

<style type="text/css">
    .link { stroke: #ccc; }
    .routertext { pointer-events: none; font: 10px sans-serif; fill: #000000; }
    .routertext2 { pointer-events: none; font: 9px sans-serif; fill: #000000; }
    .linktext { pointer-events: none; font: 9px sans-serif; fill: #000000; }
</style>

<div id="canvas">
</div>

<script type="text/javascript" src="d3/d3.js"></script>
<script type="text/javascript" src="d3/d3.layout.js"></script>
<script type="text/javascript" src="d3/d3.geo"></script>
<script type="text/javascript" src="d3/d3.geom.js"></script>


<script type="text/javascript">

var w = 960,
    h = 600,
    size = [w, h]; // width height    
var vis = d3.select("#canvas").append("svg:svg")
  .attr("width", …

我对D3.js很新,而且我一直在玩力布局.我试过的一件事就是在链接上放置标签.

一种方法是通过附加svg:text和手动计算translate&rotate,它可以用直线工作.但是,如果链接是一个svg:path(例如弧),这不会按预期工作.在这些情况下,svg:textPath建议解决方案.

在本演示中,您可以看到向链接添加标签的简单实现svg:textPath.唯一的问题是,如果源位于目标的右侧,则文本以相反的方向呈现(从我们的角度来看,它从路径的角度来看仍然是正确的).我的问题是,如何处理这个问题？

我想出的唯一"解决方案"是,在上述情况下手动交换源和目标.在这里,你可以看到它几乎可以工作.

在交换发生的状态下,您还可以看到弧线翻转到另一侧,这看起来并不正确.:(