d3.js:如何创建“力导向图集群”

2024-04-17

我一直在探索 d3.js 库,尤其是力导向图创建。我仔细阅读了 Bostock 等人关于它的论文,并注意到我正在尝试创建的精确类型的图表,基本上是一个力导向图,其中带有围绕羽毛组的颜色编码区域。

这是第三列第二行的插图,此处标记为“力导向图簇”:http://vis.stanford.edu/papers/d3 http://vis.stanford.edu/papers/d3

这里的代码生成基本图:http://mbostock.github.com/d3/ex/force.html http://mbostock.github.com/d3/ex/force.html

我的问题是:动态生成区域多边形的代码是什么?


您可以尝试将示例船体代码与力节点集成。

Hull: http://bl.ocks.org/mbostock/4341699 http://bl.ocks.org/mbostock/4341699

兵力布局:http://bl.ocks.org/mbostock/1021841 http://bl.ocks.org/mbostock/1021841

这是我在评论中提供的答案:

http://bl.ocks.org/donaldh/2920551 http://bl.ocks.org/donaldh/2920551

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

d3.js:如何创建“力导向图集群” 的相关文章

  • 使用频带刻度的相同可重复字符串值

    我是 D3 的新手 想绘制带有 6 个水平条的图表 我的 xAxis 与它们的值是scaleLinear 的 所以我希望 yAxis 只是一个包含每个条形名称的列表 所以对于 yScale 我有 6 个名称 Games Apps Games
  • 将数据从 csv 复制到 D3 中的数组中

    我知道这个问题以前曾被问过 但由于某种原因 他们的解决方案对我不起作用 我正在尝试使用 CSV 文件中的数据填充两个数组 其中 name value alpha 34 beta 12 delta 49 gamma 89 我现在正在尝试的是
  • 如何访问 nvd3 中 d3 图的 x 和 y 比例?

    我正在使用 nvd3 绘制一些系列 并想向图中添加一些任意矩形 如何访问 d3 图的底层 x 和 y 比例 以便将矩形坐标转换为 svg 像素坐标 以便与现有数据的比例相同 function d3 render response nv ad
  • d3树计算所有孩子的数量

    我有一个基于以下内容的 d3 树 http bl ocks org mbostock 1093025 http bl ocks org mbostock 1093025 我如何计算所有孩子的数量 我已经尝试过这个 但是它计算了树中的所有行
  • d3.js:如何在圆环图中的标签下方添加值

    我是 d3 js 的新手 到目前为止我所取得的成就是 this https jsfiddle net saras arya ypdw96v9 使用教程和视频 Now I am trying to add the dataset value
  • 将 D3 svg 保存为高质量图像

    有没有办法将 D3 SVG 图像保存为高质量图像 如果是的话请解释一下 截至目前 我正在使用以下代码将 svg 保存为图像 但我得到的图像质量不高 var canvas1 document createElement canvas canv
  • 使用canvg将C3.js SVG可视化到Canvas - 折线图填充黑色矩形,“错误:元素'parsererror'尚未实现”

    我正在尝试使用 Canvg 将 SVG 转换为 Canvas 这里是jsfiddle http jsfiddle net sridev24 vcz468f9 我收到一条错误消息 错误 元素 parsererror 尚未实现 我可以理解 ca
  • d3 单击时聚焦于节点

    我正在尝试实现一种力布局 其中单击节点将能够专注于节点周围的区域 我看过一些例子 但我收到一个错误 上面写着link bounds is not defined 我认为边界没有为力布局定义 并且适用于我从中获取聚焦功能的示例http bl
  • 如何使用 jQuery 循环 JSON 文件

    我正在尝试循环下面的 JSON 文件 statements subject A predicate B object C subject D predicate E object F 正如您所看到的 有两个主语 两个谓语和两个宾语 例如 我
  • 我想从 Cakefile 运行 d3

    我想从命令行执行一些 d3 代码 最初我只是尝试了类似的方法 task data Build some data with d3 gt d3 require lib d3 v2 console log d3 version d3 versi
  • d3.select 不适用于特殊字符

    我正在使用 d3 js 处理简单的图表 假设下面的 div 是我计划放置 d3 的 svg 容器的地方 div 但是当我使用 d3 select my div chart 我无法选择特定的 div 但是通过使用 java 脚本选择器 它可以
  • 矩形相当于文本的文本锚点表示属性吗?

    是否有一个与文本的文本锚点表示属性等效的矩形 我希望能够从左侧 右侧或根据情况定位矩形 我知道这可以通过一些简单的计算来完成 但我只是想知道是否已经存在内置的东西 文本锚点演示属性上的链接 https developer mozilla o
  • 使用 d3 在两个节点之间绘制多条边

    我一直在关注 Mike Bostock 的代码这个例子 http bl ocks org 1153292学习如何在 d3 中绘制有向图 并且想知道如何构建代码 以便可以在图中的两个节点之间添加多个边 例如 如果上例中的数据集定义为 var
  • D3:使用 d3-tile 缩放到边界框

    我已成功将 D3 矢量 地图分层到从 Mapbox 提取图块的 d3 tile 光栅 地图之上 手动缩放效果非常好 矢量和光栅都是同步的 我现在正在尝试实施迈克 博斯托克 缩放到边界框 https bl ocks org mbostock
  • NVD3/D3改变y轴最小值

    我目前正在使用 NVD3 制作一些折线图 我想知道是否可以使 y 轴刻度始终从 0 开始 目前它始终从最低的 y 值开始 我尝试过使用tickValues 但我不想更改其他值 我还尝试添加值为 0 的数据点 但这似乎是一种解决方法 它会影响
  • 如何使用 d3.v4 中的 JSON 数据创建树布局 - 不使用 stratify()

    我正在尝试将一些 d3 代码从 v3 更新到版本 4 我有一个使用 JSON 数据的树形图 d3 v4 示例展示了如何使用 stratify 将表格数据 例如flare csv 转换为分层数据https bl ocks org mbosto
  • 暂停和恢复过渡

    我在用setInterval 因此转换会在一定时间间隔后发生 是否可以使用 setInterval 暂停和恢复工作 任何正确方向的建议 指示都会非常有帮助 这个问题是在 D3 v3 是最新版本时发布的 5年后D3 v5有了一些新方法 比如s
  • 将任何 D3.js 图表与 DC.js 集成

    我试图弄清楚如何轻松地将任何 D3 js 图表与 DC js 库集成 以便在所有图表之间使用交叉过滤功能 我也确实理解以前曾问过这种性质的问题 添加链接以供参考 DC js 监听图表组渲染 https stackoverflow com q
  • 在 d3 中应用转换时出现错误

    我正在尝试对我在 d3 中设计的条形图应用一些过渡效果 这是我的代码 svg selectAll bar data data enter append g attr class bar append rect attr rx barRadi
  • 使圆圈与 d3.js 上的多线匹配相同的颜色过滤?

    我有一个多线图 当按每种水果过滤时会更新 每条线条颜色对应不同的销售年份 在 的帮助下Shashank https stackoverflow com users 5569282 shashank 每个数据点线上的圆圈已添加到组中 而不是直

随机推荐