是否可以在 D3 的标签云中使用点击事件,如果可以,如何使用?

2024-02-20

d3-cloud 关于点击事件 是否可以在 D3 的标签云中使用点击事件,如果是,如何使用

<!DOCTYPE html>
<meta charset="utf-8">
<script src="../lib/d3/d3.js"></script>
<script src="../d3.layout.cloud.js"></script>
<body>
<script>
  var fill = d3.scale.category20();
  var zz= ["Hello", "world", "normally", "you", "want", "more", "words", "than", "this"];
  d3.layout.cloud().size([300, 300])

      .words((zz).map(function(d) {
        return {text: d, size: 10 + Math.random() * 90};
      }))
      .rotate(function() { return ~~(Math.random() * 2) * 90; })
      .font("Impact")
      .fontSize(function(d) { return d.size; })
      .on("end", draw)
      .start();

  function draw(words) {
    d3.select("body").append("svg")
        .attr("width", 300)
        .attr("height", 300)
      .append("g")
        .attr("transform", "translate(150,150)")
      .selectAll("text")
        .data(words)
      .enter().append("text")
        .style("font-size", function(d) { return d.size + "px"; })
        .style("font-family", "Impact")
        .style("fill", function(d, i) { return fill(i); })
        .attr("text-anchor", "middle")
        .attr("transform", function(d) {
          return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function(d) { return d.text; });
  }
</script>

(我希望“你好”,“世界”,“正常”,“你”,“想要”,“更多”,“单词”,“比”,“这个”单词可点击)


只需在脚本末尾添加以下内容:

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

是否可以在 D3 的标签云中使用点击事件,如果可以,如何使用? 的相关文章

  • 在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.behavior.zoom 事件时,如何设置平移和缩放的初始值?

    下面示例中的方块是具有初始平移和比例设置的 SVG 组的一部分 单击正方形会启动缩放过渡 但过渡设置的初始值与我的默认值不同 这一点从过渡开始时的不和谐就可以明显看出 如何在以编程方式启动的缩放过渡上设置平移和缩放的初始值 var svg
  • d3.js比例符号图:根据数据值设置圆的半径

    我正在遵循这个关于如何使用 d3 js 和 mapbox 制作地图的精彩示例 https franksh com posts d3 mapboxgl https franksh com posts d3 mapboxgl 它工作得很好 除了
  • D3 js 链接在节点下面

    我创建了图形对象 稍后可以使用更多节点和链接来扩展图形对象 第一个创作看起来不错 然后 与add函数我添加了节点 4 和链接 as you can see above the link of between node 4 and 3 is
  • d3.js 强制布局是否允许动态 linkDistance?

    我使用力布局来表示有向未加权网络 我的灵感来自以下例子 http bl ocks org mbostock 1153292 http bl ocks org mbostock 1153292 我的问题是 在我的情况下 节点之间有更多的链接
  • nvd3.js - 无法更改折线图中线条的颜色

    我正在尝试更改 nvd3 折线图不同线条的颜色here http nvd3 org livecode index html codemirrorNav但我无法理解该怎么做 我想将示例中的 2 条线的颜色更改为绿色和青色 我试过 nv add
  • 如何处理 d3 中 Beeswarm 图中的碰撞?

    我一直在玩这个例子here https gf neocities org co2bs co2bee html一会儿 我想做的是突出显示图中的单个节点 圆圈 通过使用边框使其变大 稍后我也想在其中添加文本或字母 目前 我已经圈了Bhutan图
  • 多个链接 dc.js 图表的 d3-tooltips

    我正在寻找修改 dc js 的开箱即用工具提示 似乎有一个解决方案使用d3 js 工具提示 https github com Caged d3 tip as in 这个问题 https stackoverflow com questions
  • 错误: 属性 d="MNaN,NaNA67.5,67.5 0 1,1 NaN,NaNL0,0Z" 的值无效

    我制作了一个饼图 当所有值都存在时 它工作正常 但是当所有值都设为 0 时 在控制台中我收到 600 多个错误 错误 属性translate translate NaN NaN 的值无效 错误 属性 d M4 133182947122317
  • LeafletJs只显示一个国家

    我使用 Leafletjs 和 D3 来显示地图 我只想在地图上显示英国 Leaflet和D3是否可以只显示英国 这当然是可能的 现在的解决方案取决于您是想使用 D3 绘制英国 还是想从 Tile Server 获取它 在后一种情况下 有一
  • d3 树 - 有相同孩子的父母

    我一直在将代码从 JIT 转换为 D3 并使用树布局 我已经复制了代码http mbostock github com d3 talk 20111018 tree html http mbostock github com d3 talk
  • 设置 D3 力定向图

    致尊敬的读者 我对 javascript 相当陌生 我也遇到过这个问题 我正在尝试实现这个力导向图的修改版本 http mbostock github com d3 ex force html http mbostock github co
  • D3.以编程方式缩放后使用鼠标滚轮时缩放会跳转

    当我通过单击鼠标缩放到特定位置然后尝试平移或使用鼠标滚轮时 缩放行为会跳跃 看来我的缩放级别正在恢复 就像单击鼠标之前一样 这是我的事件处理程序 function click d var x y k if d centered d var
  • 调整发散堆积条形图以使用通用更新模式

    我一直在使用可用的堆积条形图示例here https bl ocks org mbostock b5935342c6d21928111928401e2c8608使用以下代码 var data month Q1 2016 apples 384
  • 根据 D3 中的属性值对对象进行排序

    我有一系列在 D3 中使用的对象 例如 var cities city London country United Kingdom index 280 city Geneva country Switzerland index 259 ci
  • 请建议 D3.js 进行 CSV 数据导入

    我正在尝试使用 D3 js 导入 CSV 数据 var englishArray d3 csv data csv function d return d value function error data var englishArray
  • 时间序列折线图与轴不同步

    本实验基于这个d3官方例子 http bost ocks org mike path 我想要实现的是可视化时间序列数据的最后 x 分钟 我有这个代码的副本jsfiddle http jsfiddle net 225dC 3 单击以添加新数据
  • 窗口调整大小事件上的响应式画布

    我是画布概念的新手 我正在尝试使用 D3 js 绘制画布 我想让画布根据窗口屏幕大小进行响应 function onResize var element document getElementsByTagName canvas 0 var
  • nvd3散点图中自定义无数据标签

    我正在尝试使用自定义消息而不是显示的 无可用数据 消息 我正在使用 nvd3 散点图 气泡图 我遇到了一个建议here https stackoverflow com questions 17458236 nvd3 showing empt

随机推荐

  • 偏航、俯仰和横滚分别与航向、俯仰和倾斜相同吗?

    我有两个不同的系统 引擎 A 引擎 B 发动机A 动机追踪软件 生成 偏航 俯仰 滚转 和发动机 B 4D影院 期望 航向 俯仰 坡度 我的研究得出的结果是这两个系统之间没有区别 Yaw Pitch Roll Heading Pitch B
  • React:为什么组件的构造函数只被调用一次?

    In the 下面的例子 http codepen io anon pen VYVPBJ when Item 2被点击 Second 1显示而不是Second 2 为什么 你会如何解决这个问题 var guid 0 class Conten
  • C# WinForms ListView 项目计数更改事件

    当 ListView 中的项目数发生变化时 Win Forms 中是否有一个事件可以触发 我尝试了 大小 和 文本 奇怪的是 它们 有点 有效 但并不总是 我试图触发一个标签来更新列表视图项目的计数 因为它发生变化 而无需在一百种方法中手动
  • 未找到 Browserify 命令

    简单的问题 当我从 mac 终端运行 browserify index js o app js 时 我得到命令未找到 我已经完成了 npm install g browserify 但仍然没有运气 知道我为什么会收到这个吗 谢谢 对我来说
  • Android:通过 adb shell am 启动应用程序信息对话框

    我正在尝试编写一个脚本 它将通过 adb 为我正在测试的应用程序启动 应用程序信息 系统对话框 我做了一些调查并提出了这个命令 它将启动 应用程序信息 但会因强制关闭而失败 logcat 中的 NullPointerException ad
  • “git config --list”显示重复的名称

    git config list显示两个值user name 一个全局 一个本地 user name My Name user name My Other Name 我的理解是 本地价值观优先于全球价值观 我怎样才能得到git config仅
  • 子div高度100%内部位置:固定div + 自动溢出

    我在尝试以下操作时遇到一些奇怪的行为 请参阅jsfiddle http jsfiddle net 9nS47 http jsfiddle net 9nS47 HTML div div div div div div div div div
  • JAR 中存在类,但仍然“无法找到或加载主类”

    我下载并安装了UMD 的 FindBugs 3 0 http findbugs sourceforge net downloads html in usr local share findbugs 3 0 ls usr local shar
  • 在android中的按钮上设置图像?

    我一直在尝试使用以下代码在按钮上设置图像 但它似乎不起作用 我认为我做错的是我正在使用的图像的路径 但我尝试了不同的路径 但它不会工作 我已将图像复制到 res 文件夹中的可绘制文件夹中 我在这里做错了什么 final Button nex
  • 将外部应用程序移动到屏幕前面

    我正在运行的应用程序需要调用单独的应用程序来进行一些扫描 我通过启动一个新的应用程序来调用另一个应用程序System Diagnostics Process 一旦获得该流程 我就会调用一个方法来让该应用程序获得焦点 我尝试了两种不同的方法来
  • 在 r 中跨多个数据帧应用一组操作

    我一直在为我的项目学习 R 但无法在 google 上找到我当前问题的解决方案 我有大约 100 个 csv 文件 需要对它们执行一组精确的操作 我已将它们作为单独的对象读取 我认为这可能是不正确的 r 风格 但我无法编写可以循环的函数 每
  • IText 2 + Flying Saucer:如何避免两个pdf页面之间的图像出现损坏?

    我有一个 html 文件 我正在使用 Itext 2 和飞碟将其转换为 pdf 文件 问题是 如果图像在页面末尾附近开始 飞碟会将其中的一部分渲染到当前页面的末尾 并将其余部分渲染到下一页的开头 怎么说我只想将整个图像放在一页上 您可以将其
  • 如何在 ASP.NET 应用程序中查询 Word docx?

    我想将 Word 2007 或更高版本的 docx 文件上传到我的 Web 服务器 并将目录转换为简单的 xml 结构 使用传统 VBA 在桌面上执行此操作似乎很容易 查看用于创建 docx 文件的 WordprocessingML XML
  • Jenkins - 使用 Git 插件请求登录凭据

    我有几个工作从 bitbucket 中提取代码并在 jenkins 中构建它 我使用 Git 插件来指定存储库 URL git 凭据 尽管我在每个作业配置中设置了凭据 但每次推送到 bitbucket 触发 jenkins 作业 时 Mac
  • 如何让 AVPlayer 在暂停时重绘当前 AVItem videoComposition

    我正在为 macOS 构建一个简单的视频编辑器 电影文件作为 AVAsset 加载 由 AVVideoComposition 中的一系列 CIFilter 进行转换 并由 AVPlayer 播放 我展示了 CIFilter 的一些参数的 U
  • 从函数返回记录集(虚拟表)

    我需要一个 Postgres 函数来返回一个包含自定义内容的虚拟表 就像在 Oracle 中一样 该表有 3 列和未知的行数 我只是在互联网上找不到正确的语法 想象一下 CREATE OR REPLACE FUNCTION public s
  • .NET:如何创建文件图标叠加层

    我正在尝试在各种文件的图标上添加不同的图标覆盖 注意 并非特定类型的所有文件 只是某些文件 如果您不明白我的意思 我指的是 TortoiseSVN TortoiseHG Dropbox 等程序的功能 这可以在 NET 中完成吗 如果是这样
  • 当任何用户组名称包含“/”时,Get-ADPrincipalGroupMembership 失败

    这真的很烦人并且很难找到 但我已经在我的环境中证明了这一点 所以我想我将其发布在这里 希望帮助更多的人解决它 问题是 当使用Get ADPrincipalGroupMembership Identity User SamAccountNam
  • Web API POST 方法返回 HTTP/1.1 500 内部服务器错误

    正如标题所示 我在使用 Web API 的 post 方法时遇到 500 内部服务器错误 Get 方法工作正常 只是在 POST 中出现错误 我正在使用 fiddler 发送帖子请求 响应头 HTTP 1 1 500 内部服务器错误 请求标
  • 是否可以在 D3 的标签云中使用点击事件,如果可以,如何使用?

    d3 cloud 关于点击事件 是否可以在 D3 的标签云中使用点击事件 如果是 如何使用