我已经构建了一个带有分组节点的 d3
力定向图。我想将这些组封闭在云状结构中。我该怎么做?
图表的 Js Fiddle 链接:http://jsfiddle.net/Cfq9J/5/
我的结果应该类似于这张图片:
最佳答案
这是一个棘手的问题,我不完全确定您能否以一种表演的方式来解决这个问题。你可以在这里看到我的静态实现:http://jsfiddle.net/nrabinowitz/yPfJH/
还有这里的动态实现,虽然它很慢而且不稳定:http://jsfiddle.net/nrabinowitz/9a7yy/
实现注意事项:
这是通过用其组中的所有其他圆圈遮盖每个圆圈来实现的。您或许可以通过碰撞检测来加快速度。
因为每个圆都被渲染并用作 mask ,所以大量使用
use
元素来为每个节点引用圆。实际的圆在def
元素中定义,这是一个非渲染定义以供重用。运行时,每个节点将呈现如下:<g class="node"> <defs> <circle id="circlelanguages" r="46" transform="translate(388,458)" /> </defs> <mask id="masklanguages"> <!-- show the circle itself, as a base --> <use xlink:href="#circlelanguages" fill="white" stroke-width="2" stroke="white"></use> <!-- now hide all the other circles in the group --> <use class="other" xlink:href="#circleenglish" fill="black"></use> <use class="other" xlink:href="#circlereligion" fill="black"> <!-- ... --> </mask> <!-- now render the circle, with its custom mask --> <use xlink:href="#circlelanguages" mask="url(#masklanguages)" style="fill: #ffffff; stroke: #1f77b4; " /> </g>
我将节点圆圈、链接和文本分别放在不同的
g
容器中,以适本地对它们进行分层。最好在节点数据中包含一个数据变量,而不是字体大小 - 我必须将
fontSize
属性转换为整数才能将其用于圆半径.即便如此,由于文本的宽度与数据值无关,您会得到一些比其下方的圆圈更大的文本。不确定为什么第一个节点的圆在静态版本中没有正确放置 - 它在动态版本中有效。谜。
关于javascript - 将 d3 力定向图的节点封闭在圆形、多边形或云中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12889262/