D3 - 显示/隐藏仅单击节点的文本

2023-12-23

我试图在单击时显示/隐藏 D3 中节点的文本。我尝试使用以下代码:

var node = svg.selectAll(".node")
  .data(json.nodes)
  (...)

node.on("click", function() {
  if (textShowing) {
    node.select("text").style("visibility", "hidden");
  } else {
    node.select("text").style("visibility", "visible");
  }
    textShowing = !textShowing;
 });

该代码的结果是文本属性all单击其中任何一个节点时显示/消失。

如何仅影响单击节点的文本属性?


node是包含所有组的选择(我认为它们是组,因为您没有复制/粘贴整个选择)。

如果您只想在单击的组中执行任何操作,则必须使用d3.select(this),它选择当前(在您的情况下,单击的)DOM 元素。

因此,代替:

node.select("text")

它应该是:

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

D3 - 显示/隐藏仅单击节点的文本 的相关文章

  • 在生产中使用 babel-node 可以吗

    我一直在使用 babel node 和 browserify 以及 babelify 转换来开发一个网站 以支持 ES6 语法 我只是想知道 我可以在生产中运行它吗 babel node server 而不是 node server 要在
  • 使用 keyup 上的 Submit() 提交表单两次

    我有一个与此类似的 jQuery HTML 代码
  • 使用 Ajax 在输入时提交 Textarea,然后渲染部分内容而不刷新整个页面

    目前我正在尝试通过 JS 和 Ajax 在没有提交按钮的情况下发表评论 并且它有效 问题是当帖子提交时 页面重新加载到 post id comment页面 我希望它呈现部分内容 而不是刷新整个页面或将我带到不同的页面 我对 JS 不熟悉 任
  • 循环内的局部变量会被垃圾收集吗?

    我想知道将循环内引用的任何变量放在循环外是否更有效 或者它们可以像函数内的变量一样被垃圾收集吗 var obj key val for var i 0 i lt 10 i console log obj or for var i 0 i l
  • 优化数据可视化 Web 应用程序的性能

    我正在重写 3 年前编写的数据可视化网络工具 从那时起 浏览器的 JavaScript 引擎变得更快 所以我正在考虑将部分工作从服务器转移到客户端 在页面上 数据在表格和地图 或图表 中可视化 它使用相同的数据 但以不同的方式 因此准备显示
  • 使用画布元素作为文本区域

    我正在寻找有关如何使用类似于文本区域的画布元素的直接描述 我见过这样的项目Ace http ace ajax org 只是想知道如何像文本区域一样写入该区域 只是纯文本 没有什么花哨的 提前致谢 Ace 曾经是 Mozilla Skywri
  • 1分30秒倒计时器javascript

    我有代码 但它适用于 2 分钟计时器 我需要将其修改为 1 分 30 秒计时器 我已经尝试过 但未能从 1 30 开始计时器 因为我是这一行的初学者 并且想学习如何做到这一点 这是代码 div div
  • 在 Angular 单元测试中应该如何处理运行块?

    我的理解是 当您在 Angular 单元测试中加载模块时 run块被调用 我认为如果你正在测试一个组件 你不会想同时测试run块 因为unit测试应该只是测试一个unit 真的吗 如果是的话有什么办法可以防止run阻止运行 我的研究让我认为
  • NodeJs读取JSON文件

    我正在使用 NodeJs 读取 json 文件 我的代码非常基本 var obj require sample json console log obj 0 Sample json 文件包含这样的字符串化 JSON sample good
  • Disqus 评论数始终为 0 条评论

    我想我已经按照通用代码的说明设置了 Disqus 问题是它总是说某个帖子有 0 条评论 拿这个帖子来说 http tx0rx0 com retropie and the raspberry pi http tx0rx0 com retrop
  • getElementsByClassName & IE8:对象不支持此属性或方法[重复]

    这个问题在这里已经有答案了 I know getElementsByClassName 不支持IE8 你知道我可以用什么来代替吗 我因错误而变得烦人 对象不支持此属性或方法 HTML 代码是 function sumar var elems
  • 禁用整个站点的 IE8 加速器

    是的 我知道有类似的问题 https stackoverflow com questions 499565 is it possible to disable ie8 accelerators on my website在 SO 上 但它已
  • Javascript:通过将路径作为字符串传递给对象来获取对象的深层值[重复]

    这个问题在这里已经有答案了 可能的重复 使用字符串键访问嵌套的 JavaScript 对象 https stackoverflow com questions 6491463 accessing nested javascript obje
  • 如何正确删除动画集中引用的 Raphael SVG 元素?

    我有一组动画 Raphael SVG 元素 我正在通过用户发起的 ajax 调用添加新元素并删除旧元素 我 set push 新元素 但因为我需要删除的元素通常不是集合中的最后一个元素 所以我使用 element remove 而不是 se
  • 全局未在 ../node_modules/socket.io-parser/is-buffer.js 中定义

    预先感谢您帮助我 我正在尝试在我的一个角度组件中连接套接字 但在浏览器的控制台中它会抛出一个错误 指出 Global 未在 Object node modules socket io parser is buffer js 中定义 这是我的
  • 清理 html 字符串中的所有脚本

    HTML5 剪贴板很棒 但我正在寻找一种使其安全的方法 用户正在将文本 html 粘贴到我的网页中 这允许他们粘贴图像 表格等 我正在寻找一种方法 在将粘贴的内容添加到页面之前删除所有脚本 我需要删除
  • 在多个数组中搜索字符串,然后设置 var - jQuery

    我正在寻找基于字符串存在于哪个数组中设置一个变量 例如 var primary red blue yellow var secondary orange purple green 然后检查 purple 并返回它在 secondary 数组
  • 获取 byte[]

    我有一个 html 画布 如下所示 output is a base64string of image data var oldImage new Image oldImage onload function var resizeRatio
  • 如何从react-bootstrap复选框获取值/属性?

    我正在尝试使用反应引导复选框 https react bootstrap github io components html forms controls https react bootstrap github io components
  • React 错误:目标容器不是 DOM 元素

    我刚刚开始使用 React 所以这可能是一个非常简单的错误 但我们开始吧 我的html代码非常简单 load staticfiles

随机推荐

  • JavaScript 数组问题

    好的 我只是回顾一下 JavaScript 中的一些基本编程原则 我是编程新手 所以请耐心等待 下面是我遇到问题的代码 特别注意数组的字符串组件 var name new Array var sales new Array var tota
  • 如何突出显示列中非空白的重复项?

    我想突出显示 I 列中连接字符串的所有重复项 并在突出显示任何重复项时提供错误消息 但是 该列中有几个空白单元格 我不希望在运行宏时这些单元格显示为重复项 我从这里得到了这个代码 Sub HighlightDuplicateValues D
  • 没有编译器优化的 SSE 内在函数

    我是 SSE 内在函数的新手 并尝试通过它来优化我的代码 这是我的程序 用于计算等于给定值的数组元素 我将代码更改为 SSE 版本 但速度几乎没有改变 我想知道我是否以错误的方式使用SSE 此代码用于不允许我们启用编译器优化选项的分配 无
  • 当从 C# 程序中反序列化 JSON 时,我是否需要使用 JavaScriptSerializer 以外的任何东西?

    NET 中提供了 JavaScriptSerializer 类 System Web Script Serialization 命名空间 在 System Web Extensions dll 中提供 它最初旨在支持 AJAX Web 服务
  • 如何使用通配符设置docker的NO_PROXY

    正如 docker 官方文档中提到的here https docs docker com config daemon systemd configure where the docker daemon listens for connect
  • flatMap API 合约如何将可选输入转换为非可选结果?

    这是 Swift 3 0 2 中 flatMap 的合约 public struct Array
  • 从 Unity 中的 Android Studio 读取意图

    我有一个 Unity 游戏导出到 Android Studio 中 我有一个已保存游戏的列表 其中存储了玩家玩的每个游戏的最后一个场景 基本上存储玩家的进度 从 Unity 到 Android Studio 播放的最后一个场景的编写效果非常
  • Delphi 应用程序的插件系统 - bpl 与 dll?

    我正在编写delphi应用程序 它应该具有加载插件的能力 我使用 JvPluginManager 作为插件系统 管理器 现在 在新的插件向导中 他们说最好使用 bpl 类型插件而不是 dll 插件 这个解决方案与 dll 类型插件相比有什么
  • 增量求解有什么好处?

    如果 pop 完全破坏了上下文 即学到的引理 增量约束求解使用 堆栈 的目的是什么 模式 理由 我想如果我只有 1 个约束 几个 合词 最好进行单个查询 而不是 将单独帧中的合取词堆叠到堆栈上 如果我 有超过 1 个约束并决定使用增量求解
  • 如何使用 Gekko 加快优化速度?

    我的计划是优化家用电池的充电和放电 以最大限度地降低年底的电力成本 每15分钟测量一次家庭用电量 所以我在1天内有96个测量点 我想优化电池 2 天的充电和放电 以便第 1 天考虑到第 2 天的使用情况 我编写了以下代码并且它有效 from
  • new 类名(). 方法名(); VS className ref = new className();

    我遇到了我的同事在一个内部使用的代码eventListner 即 private void someActionPerformed java awt event ActionEvent evt new className methodNam
  • makefile“没有规则来创建目标”错误

    我已经研究这个问题有一段时间了 但仍然不知道出了什么问题 我的 makefile 如下所示 F90 pgf90 NETCDF DIR opt netcdf LBS L NETCDF DIR lib lnetcdff lnetcdf INCL
  • 通过交互和指南修改 ggplot2 中的图例

    df lt data frame Depth c 1 2 3 4 5 6 7 8 Var1 as factor c rep A 4 rep B 4 Var2 as factor c rep c C D 4 Value runif 8 g l
  • Eclipse 给出错误“...不是链接资源的有效位置。”

    当我尝试在 Eclipse 中为构建路径配置添加新的类路径变量 并且我添加的路径是当前工作区是其子目录的目录时 Eclipse 给出错误 C JavaStuff is not a valid location for linked reso
  • WCF DataContract - 标记成员 IsRequired=false

    我有一份合同如下 DataContract public class MyObj DataMember IsRequired true public string StrA get private set DataMember IsRequ
  • 具有非常大的 HDF5 文件的 Tensorflow-IO 数据集输入管道

    我有非常大的训练 30Gb 文件 由于我的可用 RAM 无法容纳所有数据 因此我想批量读取数据 我看到有 Tensorflow io 包实施了一种方式 https www tensorflow org io api docs python
  • 为什么Java类应该实现comparable?

    为什么是JavaComparable用过的 为什么有人要实施Comparable在课堂上 您需要实施比较的现实生活示例是什么 这是一个现实生活中的例子 注意String还实现了Comparable class Author implemen
  • 链表中的递归

    我一直在练习链表并想在其上实现递归 尽管在某些情况下我能够有效地实现它 但在其他情况下我却惨败 我想知道一种进行递归的方法 以便不必使用 while 来遍历链接列表 我已经使用递归来遍历数组 但是当我想在这种情况下做类似的事情时它失败 我在
  • Svg矩阵分解

    在 svg 中我们有方法element getCTM 它返回一个SVGMatrix as a c e b d f 0 0 1 我想从这个矩阵计算 sx sy 和旋转角度 关于这个主题有很多东西需要阅读和学习 我将给出一个基本的答案 但请注意
  • D3 - 显示/隐藏仅单击节点的文本

    我试图在单击时显示 隐藏 D3 中节点的文本 我尝试使用以下代码 var node svg selectAll node data json nodes node on click function if textShowing node