是否可以在 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 的标签云中使用点击事件,如果可以,如何使用? 的相关文章

  • SVG 路径超出 d3 画笔上的图表区域

    当我尝试刷动和缩放折线图的一部分时 所选区域的某些部分会呈现在图表之外 代码和行为再现可以在以下位置找到这个jsbin https jsbin com jamojonaqu edit js output 单击并拖动以选择一部分并放大 双击以
  • 如何访问 nvd3 中 d3 图的 x 和 y 比例?

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

    我在 Apex 中构建了一个 D3 力图 基本上就像http bl ocks org mbostock 1093130 http bl ocks org mbostock 1093130 or http bl ocks org mbosto
  • 如何使用 jQuery 循环 JSON 文件

    我正在尝试循环下面的 JSON 文件 statements subject A predicate B object C subject D predicate E object F 正如您所看到的 有两个主语 两个谓语和两个宾语 例如 我
  • 矩形相当于文本的文本锚点表示属性吗?

    是否有一个与文本的文本锚点表示属性等效的矩形 我希望能够从左侧 右侧或根据情况定位矩形 我知道这可以通过一些简单的计算来完成 但我只是想知道是否已经存在内置的东西 文本锚点演示属性上的链接 https developer mozilla o
  • 通过 Fabric.js 推送 D3.js 输出以支持 IE8?

    我正在评估Fabric js http fabricjs com 作为替代拉斐尔 js http raphaeljs com 用于创建与 IE8 兼容的交互式可视化 IE8 不支持 SVG 或画布 不幸的是 IE8 支持是不可协商的 Rap
  • 寻找一种重构 D3.js 风格的方法链接模式的方法

    在学习 D3 js 时 我遇到了博客文章 http bost ocks org mike chart 解释其可重用代码单元背后的主要设计模式 我复制了下面的相关代码 下面呈现的模式的方式正是在 D3 代码库和插件中使用的方式 example
  • d3 (v4) 树布局和打字稿:类型“HierarchyNode”上不存在属性“x”

    我正在尝试在使用时使用正确的 ts 类型d3 hierarchy具有树布局的根 例如 interface MyCustomGraphType id string children MyCustomGraphType let treeData
  • 如何在D3中导入json数据?

    如何在D3中导入json文件 I did d3 json temp json 但是我如何在进一步的代码中访问这个数据集呢 到目前为止我已经尝试过 var data d3 json temp json 但使用 data data 在其余代码中
  • d3.js V4 按钮缩放实现表现得很奇怪

    我正在尝试实现 d3 平移和缩放功能 默认的平移和缩放工作正常 但要求是我们还需要放大和缩小按钮 我还实现了缩放按钮 它也有效 奇怪的是 当我第一次移动图像并单击缩放按钮时 图像会移回到以前的位置 不仅是当我第一次用鼠标缩放并使用按钮再次开
  • d3.js 中拖动后(有时)单击事件未触发

    观察到的行为 我正在使用 d3 js 并且我想根据以下情况更新一些数据drag https github com mbostock d3 wiki Drag Behavior wiki on事件 并重绘事件之后的所有内容dragend ht
  • 如何使用数据对象中的值指定 d3.js 选择器?

    我在 Web 应用程序中使用 d3 js 描述我想要做的事情的最简单方法是查看下面链接的 Fiddle 但基本设置是我有一个包含数据对象的数组 my data id B text I want this text in B id C tex
  • 在 d3v4 堆积条形图中使用 JSON

    我找到了一个d3v3堆积条形图示例 http bl ocks org mstanaland 6100713我想使用它 因为它使用 json 数据 还有一个d3v4规范条形图示例 https bl ocks org mbostock 3886
  • 将元素添加到 D3 圆包节点

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

    I am making a bar chart using D3 js like this source statcan gc ca http www statcan gc ca pub 12 593 x 2007001 figures f
  • D3 旭日弧尺寸

    我正在尝试根据以下示例创建 D3 旭日图 https bl ocks org maybelinot 5552606564ef37b5de7e47ed2b7dc099 https bl ocks org maybelinot 55526065
  • 在 d3 中应用转换时出现错误

    我正在尝试对我在 d3 中设计的条形图应用一些过渡效果 这是我的代码 svg selectAll bar data data enter append g attr class bar append rect attr rx barRadi
  • d3力定向布局-链接距离优先

    在 d3 中使用力导向布局 如何使链接距离成为优先事项 同时仍然保持良好的图形布局 如果我指定动态链接距离 但保留默认费用 则我的图形距离会因费用函数而发生一些变形 并且不再是准确的距离 但是 如果我删除电荷 图表将如下所示 任何建议表示赞
  • GeoJson 世界数据库 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在开发一个项目 需要使用 d3 js 显示国家和城市的地图 实际上 D3支持GeoJson格式 通常
  • 根据边界动态设置初始 d3 缩放 - V4

    我要在页面上显示大量节点 大多数情况下 由于节点放置 圆圈会超出屏幕的可见区域 有没有办法根据节点的整个边界框动态设置初始缩放级别 以便所有节点都适合屏幕的可见区域 Updated 我为此添加了一个小提琴https jsfiddle net

随机推荐

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

    我有两个不同的系统 引擎 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 的标签云中使用点击事件 如果是 如何使用