我刚刚从可视化纯D3.js中的“力反馈图”转移到了惊人的图分析库JSNetworkX(NetworkX的JavaScript端口)。现在我知道JSNetworkX在后台使用D3.js进行可视化,但是我无法解决如何在实际Node的外部显示标签。我的意思是,我可以得到Edge标签,但这是另一回事。在D3.js中,您必须使用实际的SVG Text元素,但这似乎都被抽象了。
我尝试使用所有不同的标签属性,但最后还是没有标签或在节点中间出现爆炸的标签。
我找到了一个线程,该线程似乎引用了较旧的版本,但即使更改语法也不起作用。
https://github.com/fkling/JSNetworkX/issues/16
我真的很希望能够可视化节点外部的标签,因为节点内部看起来就像是一团糟。
请帮助!哦,请参考最新版本(0.34),因为先前的答案是指旧的折旧版本。
答案 0 :(得分:0)
好的,所以回答我自己的问题...
基本上,它看起来只有两个标签:节点标签;和边缘标签。边缘标签似乎是沿着链接呈现的,并且是可配置的,
只有一个节点标签,尽管它是一个单独的SVG文本元素,但您似乎对其没有足够的控制权。使用标签样式,最好的方法是使用CSS文本对齐属性(“ text-anchor”:“ middle”,“ dominant-baseline”:“ text-after-edge”)将其放置在节点的顶部然后将节点半径缩小到5。这基本上和我可以在传统D3图形上获得的位置非常接近,在传统D3图形中,您可以完全控制标签的位置。
对是否有更好的方法仍然很感兴趣,但希望这对人们有所帮助。