草庐IT

javascript - 将 d3 力定向图的节点封闭在圆形、多边形或云中

coder 2024-07-29 原文

我已经构建了一个带有分组节点的 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/

多边圆形34codesectionjavascriptd3.jsforce-layout

有关javascript - 将 d3 力定向图的节点封闭在圆形、多边形或云中的更多相关文章

  1. ruby-on-rails - 如何在 Ruby on Rails 中实现无向图？ - 2

    我需要在RubyonRails中实现无向图G=(V,E)并考虑构建一个Vertex和一个Edge模型，其中Vertex有_多条边。由于边恰好连接两个顶点，您将如何在Rails中执行此操作？您是否知道任何有助于实现此类图表的gem或库(对重新发明轮子不感兴趣;-))？ 最佳答案 不知道有任何现有库在ActiveRecord之上提供图形逻辑。您可能必须实现自己的Vertex、EdgeActiveRecord支持的模型(请参阅Rails安装的rails/activerecord中的vertex.rb和edge.rb/test/fixtur

  2. ruby - 将 spawn() 的标准输出/标准错误重定向到 Ruby 中的字符串 - 2

    我想使用spawn(针对多个并发子进程)在Ruby中执行一个外部进程，并将标准输出或标准错误收集到一个字符串中，其方式类似于使用Python的子进程Popen.communicate()可以完成的操作。我尝试将:out/:err重定向到一个新的StringIO对象，但这会生成一个ArgumentError，并且临时重新定义$stdxxx会混淆子进程的输出。 最佳答案 如果你不喜欢popen，这是我的方法:r,w=IO.pipepid=Process.spawn(command,:out=>w,:err=>[:child,:out])

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  5. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  6. ruby-on-rails - Ruby on Rails PostGIS - 将多边形记录插入数据库 - 2

    我将RoR与PostGIS结合使用来存储位置数据。我正在尝试使用圆(例如，带半径的中心点)来存储估计位置。我试过类似的东西，但它不起作用:@location=Location.new(:place_id=>place.id,:circle=>%{ST_Buffer(ST_MakePoint(#{latitude},#{longitude})::geography,#{accuracy})})我也尝试过使用RGeo，它是出厂设置，但不确定如何准确使用它。任何帮助将不胜感激。谢谢。编辑1:我取得了一些进步。factory=RGeo::Cartesian.factorycenter_poin

  7. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  8. ruby-on-rails - 条件重定向的最佳方式？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。使用Railsv2.1，假设您有一个可从多个位置访问的Controller的操作。例如，在Rails应用程序中，您有一个链接可以从两个不同的View编辑用户，一个在用户索引View中，另一个在另一个View中(比方说从每个页面上的导航栏)。我想知道根据用户点击的链接将用户重定向回正确位置的最佳方法是什么。例如:示例1:列出所有用户点击列表中用户的“编辑”

  9. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

  10. ruby - Watir-Webdriver 是否支持点击目标为 javascript 的链接？ - 2

    我是Ruby和Watir-Webdriver的新手。我有一套用VBScript编写的站点自动化程序，我想将其转换为Ruby/Watir，因为我现在必须支持Firefox。我发现我真的很喜欢Ruby，而且我正在研究Watir，但我已经花了一周时间试图让Webdriver显示我的登录屏幕。该站点以带有“我同意”区域的“警告屏幕”开头。用户点击我同意并显示登录屏幕。我需要单击该区域以显示登录屏幕(这是同一页面，实际上是一个表单，只是隐藏了)。我整天都在用VBScript这样做:objExplorer.Document.GetElementsByTagName("area")(0).click

随机推荐