大佬教程收集整理的这篇文章主要介绍了javascript – 将d3力导向图的节点封闭在圆形或多边形或云中，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
Js Fiddle链接图：http://jsfiddle.net/Cfq9J/5/
我的结果应该与此图像类似：
和动态实现在这里,虽然它非常缓慢和紧张：http://jsfiddle.net/nrabinowitz/9a7yy/
实施说明：
>这可以通过将每个圆圈与其组中的所有其他圆圈进行遮罩来实现.您可以通过碰撞检测加快速度.
>因为每个圆都被渲染并用作遮罩,所以大量使用使用元素来引用每个节点的圆.实际的圆圈在def元素中定义,def-element是一个非重现的定义.运行此命令时,每个节点将呈现如下：
<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力导向图的节点封闭在圆形或多边形或云中全部内容，希望文章能够帮你解决javascript – 将d3力导向图的节点封闭在圆形或多边形或云中所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。