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 中创建一个可折叠树 它结合了水平 第一级和第二级 和垂直 3 级 布局 这里有一个jsfiddle http jsfiddle net artemkolotilkin z7tb23Lo 到目前为止我所得到的 除了一件事之
  • D3.js 中的点图

    我有兴趣创建一个Dot plot 每个数据值都有连续的点 但到目前为止我所管理的是为每个值创建一个点 更清楚地说 假设对于 array1 我希望第一个值创建 5 个圆圈 第二个值创建 4 个圆圈 依此类推 array1 5 4 2 0 3
  • 暂停和恢复过渡

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

    我正在尝试制作一个可缩放的圆形包装图 我希望每个子圆圈包含一个较小的图表 该图表始终具有相同的结构 即 4 列 只有条形的高度会改变 我尝试添加一个简单的rect到目前为止我的图表 但矩形没有添加到圆圈中并且是静态的 JS var marg
  • 将文本放置在矩形的中心

    在下面的代码中 文本没有放置在矩形的中心 我使用的是 attr dx x bandwidth 2 attr dy y bandwidth 2 有没有办法将文本中心放置在矩形中 而不是反复试验 目前它看起来像这样 朝底部和朝右 以下是我的代码
  • D3 v4 在同一元素上进行画笔和缩放(鼠标事件不冲突)

    我的目标是构建一个使用两者的 D3 v4 图表d3 zoom https github com d3 d3 zoom and d3 brush https github com d3 d3 brush一起 如下 当鼠标位于 x 轴上时 用户
  • 使圆圈与 d3.js 上的多线匹配相同的颜色过滤?

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

    我有一个 PIE 图表 它工作正常 但我无法使其具有响应能力和可调整大小 我需要它与移动浏览器和 iPad 等兼容 div div
  • d3.js 堆叠条形图 - 修改堆叠顺序逻辑

    我想创建一个堆积条形图 其中矩形的顺序由数据值确定 即最大到最小 最高到最短 最富有到最贫穷等 据我所知 在堆叠数据后 initial秩序似乎得到保留 这可以在我的代码片段中看到 硬编码数据让我们可以看到之前和之后发生的情况d3 stack
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • 如何在 SVG 元素上使用箭头标记?

    我需要在 d3 js 中创建一个箭头 但我找到的只是带有节点图的示例 我需要的是简单地制作一个从 A 点到 B 点的箭头 我尝试实现以下示例中的部分代码 http bl ocks org 1153292 http bl ocks org 1
  • 如何根据D3中的数据创建元素?

    看着sample https github com mbostock d3 wiki Selections wiki data d3 select body selectAll div data 4 8 15 16 23 42 enter
  • D3更新circle-pack数据新节点与现有节点重叠

    我正在关注一般更新模式 http bl ocks org mbostock 3808234但在分层方面存在问题 使用圆形包装布局 我pack新数据 update enter and exit圆形元素 然而 当新元素enter 它们重叠upd
  • 如何运行 Mike Bostock 的 D3 示例?

    我一直在尝试经营迈克博斯托克透视地球仪 http bl ocks org mbostock 6747043例如 但是如果您尝试在本地重现它 则对其 json 文件的引用是不正确的 问题来自于这行代码 d3 json mbostock raw
  • 将json解析为条形图d3js

    我正在尝试使用 json url 创建条形图 关于印象和时间 我认为我没有正确引用 data data 中的数据 如何从 d3 中的 json 文件访问印象字段 var url https script google com macros
  • D3js 从数组而不是文件中获取数据

    我发现了这个优秀的 d3js 图表here http bl ocks org Caged 6476579 但就我而言 我希望此图表从数组而不是 tsv 文件中获取值 我想让它从表 中获取值 我怎样才能做到这一点 因为它使用一个函数来实现这一
  • 如何进行多个 d3 窗口大小调整事件

    我有三个svg一页上的元素 每个元素都由 D3 陪伴 每个都有自己的页面调整大小逻辑 由我写的简单模块 https github com TimeMagazine d3 base让他们做出反应 问题在于 只有最后一个调整大小事件被触发 因为
  • 如何精确缩放已翻译的d3地图

    我有一张已翻译的地图 以使其正确适合画布 我正在尝试实现一种缩放它的方法 它确实有效 但是当您放大时它会远离中心 而不是以鼠标甚至画布为中心 这是我的代码 function map data total views var xy d3 ge
  • 在 d3.js 中换行长文本

    我想将长文本元素换行为宽度 这里的例子取自博斯托克的wrap功能 http bl ocks org mbostock 7555321 但似乎有两个问题 首先 wrap的结果没有继承元素的x值 文本左移 其次它绕在同一条线上 并且lineHe
  • NVD3 - 配置轴上的刻度

    我有一个 nvd3 折线图 它显示时间序列 但无法在 x 轴右侧获取刻度 对于较长的时间跨度 它会按预期工作 但对于较短的时间跨度 此处 12 31 05 至 01 01 06 多个刻度显示相同的日期 请看一下JSFiddle 上此图表的代

随机推荐