d3 强制定向图删除文本光标

2024-03-23

当我向 d3 力定向图形布局中的节点添加文本时,当我将鼠标悬停在该节点上时,鼠标指针会更改为文本光标。有没有办法避免这种情况并始终让它保持常规指针?

普通指针:

文本光标:

这是一个fiddle http://jsfiddle.net/pkerpedjiev/50v4px1m/4/以及用于生成这些图像的代码以及代码:

var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var drawGraph = function(graph) {
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

  var gnodes = svg.selectAll('g.gnode')
  .data(graph.nodes)
  .enter()
  .append('g')
  .classed('gnode', true)
  .call(force.drag);

  var node = gnodes.append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); });

  node.append("title")
      .text(function(d) { return d.name; });

   var labels = gnodes.append("text")
              .text(function(d) { return d.name; })
              .attr('text-anchor', 'middle')
              .attr('font-size', 8.0)
              .attr('font-weight', 'bold')
              .attr('y', 2.5)
              .attr('fill', d3.rgb(50,50,50))
              .attr('class', 'node-label')
              .append("svg:title")
              .text(function(d) { return d.name; });

  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

                  gnodes.attr("transform", function(d) {
                      return 'translate(' + [d.x, d.y] + ')';
                  });
  });
};

将以下 CSS 添加到您的文本元素:

pointer-events: none;

这将防止文本元素发生任何鼠标事件,即光标不会改变,但您也无法选择文本。

完整演示here http://jsfiddle.net/50v4px1m/5/.

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

d3 强制定向图删除文本光标 的相关文章

  • Typescript:按值检查对象是否存在于数组中

    我有这个数据 roles roleId 69801 role ADMIN roleId 69806 role SUPER ADMIN roleId 69805 role RB roleId 69804 role PILOTE roleId
  • 请解释与 Google Chrome 扩展程序的后台通信

    我已经阅读并重新阅读了此页面 并运行了示例 http code google com chrome extensions background pages html http code google com chrome extension
  • Twisted 的 Deferred 和 JavaScript 中的 Promise 一样吗?

    我开始在一个需要异步编程的项目中使用 Twisted 并且文档非常好 所以我的问题是 Twisted 中的 Deferred 与 Javascript 中的 Promise 相同吗 如果不是 有什么区别 你的问题的答案是Yes and No
  • 如何向 jQuery Tokeninput 添加占位符?

    如何将占位符添加到 jQuery Tokeninput 字段 一个正常的placeholder属性在这里不起作用 对于这样的输入
  • 从 x,y 屏幕空间坐标查找 2D 等距网格上的列、行(将方程转换为函数)

    我试图在屏幕空间点 x y 的二维等距网格中找到行 列 现在我几乎知道我需要做什么 即找到上图中红色向量的长度 然后将其与表示网格边界的向量的长度 由黑色向量表示 进行比较 现在我在数学堆栈交换中寻求帮助 以获得用于计算点 x y 与黑色边
  • ant-d upload中如何为removeFile添加PopConfirm一个图片文件

    我正在使用 Ant d Upload 通过本地系统上传文件 然后单击文件预览图像上的删除图标 图像文件将被删除 我想添加一个弹出确认 所以我尝试在 onRemovefunction 中添加确认作为承诺但它不起作用 它在浏览器中显示警报 on
  • 将音频与视频流合并 Node.js

    我正在创建 YouTube 视频下载器并且正在使用ytdl core库 它无法下载带有音频的高质量视频 因为 youtube 将其放在另一个文件中 但我需要将其全部下载到一个文件中 我已经这样做了 app get download asyn
  • 响应式网格布局框架[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何记录返回的事件发射器

    如何记录所发出的事件stream返回于MyFunc 与 JSDoc MyFunc description param Object opts description return Stream description function My
  • JavaScript 动画平滑滚动

    默认情况下 当您有这样的片段链接时 a href some url some fragment some text a 浏览器立即向下滚动到该片段 我该如何编程才能使用标准 JS 顺利地向下移动到该片段 这是一个例子 Example htt
  • 使react-leaflet能够离线使用

    我一直在使用反应传单 https github com PaulLeCam react leaflet图书馆 到目前为止运作良好 现在我希望网站预加载尽可能多的图块 以便网络应用程序 也是 PWA 可以在没有互联网的情况下使用 我找到了一些
  • 用数组反向查找对象

    假设我有一个这样的对象 resourceMap a 0 1 2 3 4 5 6 7 8 9 10 b 11 12 c 21 23 d 54 55 56 57 510 确定是否的最佳方法是什么resourceId 21将会 c 我们不知道钥匙
  • 如何将 Browserify 与外部依赖项一起使用?

    我正在尝试慢慢地将 Browserify 引入我的网站 但我不想重写所有 js 也不希望 jquery 和其他库的重复实例与我的 Browserify 版本捆绑在一起 如果我构建将 jquery 列为外部依赖项的模块 那么如何将其指向我的全
  • React无限滚动scrollableTarget动态获取id?

    我在我的项目中使用react infinite scroll component 如何让scrollableTarget动态获取item id 我试过这样scrollableTarget item id 但它不起作用 必须与该 div 具有
  • 如何在 e2e AngularJS 测试中进行文件上传?

    在我的一种观点中 我有一个文件上传控件 它支持通过拖放或单击按钮后打开的标准文件对话框上传文件 How to do this in my e2e tests1 1 Just one of the two options will be en
  • 从多维无穷大数组中删除数组元素

    我想删除一个特定元素 例如 我想删除元素id 76在下面的数组中 而且 数组可以无限地组合在一起 这里的问题是我无法刷新页面 因为我使用 Vue js 进行即时操作 如果我能做到这一点 我的下一个问题可能是如何在我现在想要的地方添加一个元素
  • 如何获取使用 .map 渲染的第一个元素的 ref?

    我需要在几行中显示视频 卡片 的缩略图 并重点关注第一个缩略图 我使用嵌套地图进行了显示 该代码基本上迭代视频数组并返回多行视频 我们如何关注第一个渲染的元素 我认为我们需要获得第一个要聚焦的元素的引用 但是我们如何在这里设置 ref 并在
  • 当选择下拉列表中的某些值时,取消选中复选框

    当我从下拉列表中选择某个值或用户未从下拉列表中选择任何值时 我需要取消选中复选框 我现在正在使用 Jquery 这是我现在使用的代码 但它不起作用 Script
  • 如何在 SVG 元素上使用箭头标记?

    我需要在 d3 js 中创建一个箭头 但我找到的只是带有节点图的示例 我需要的是简单地制作一个从 A 点到 B 点的箭头 我尝试实现以下示例中的部分代码 http bl ocks org 1153292 http bl ocks org 1
  • 在 javascript 中使用 xPath 解析具有默认命名空间的 XML

    我需要创建一个 XML xPath 解析器 所有解析都必须在客户端进行 使用 JavaScript 我创建了一个 javascript 来执行此操作 在默认名称空间发挥作用之前 一切看起来都正常 我根本无法查询具有默认命名空间的 XML 我

随机推荐

  • 强制从 US-ASCII 编码为 UTF-8 (iconv)

    我正在尝试将一堆文件从 US ASCII 转码为 UTF 8 为此 我使用 iconv iconv f US ASCII t UTF 8 file php gt file utf8 php 我的原始文件是 US ASCII 编码的 这使得转
  • WiX:旧版本不会在“添加/删除程序”列表中消失

    我有一个使用 WiX 安装和升级的 Windows 服务 效果很好 非常快 唯一的问题是 如果我从 1 0 升级到 1 1 两个副本在 添加 删除程序 列表中仍然有条目 那么 当我执行更新时 如何确保 WiX 删除 添加 删除程序 列表中旧
  • 使用 Chrome 开发者工具调试 onFocus 事件?断点后无法返回焦点

    我正在尝试调试 JavaScriptonFocus附加到页面上一堆文本框的事件 选择一个文本框然后按 Tab 键切换到下一个文本框时会出现此错误 我试图通过在其中放置一个断点来调试它onFocus使用 Chrome 开发者工具的事件 我面临
  • Prolog 时间重叠问题

    假设我有这个知识库 free ann slot time 8 0 time 9 0 free ann slot time 10 0 time 11 0 free bob slot time 7 0 time 8 30 free bob sl
  • Jenkins Copy Artifact 解析复制的构建 ID

    我在 Jenkins 2 73 1 中使用 在多分支管道中复制神器插件 https wiki jenkins io display JENKINS Copy Artifact Plugin要从其他两个管道获取最后成功的工件 请参阅我的 Je
  • 范围类型如何影响 EntityQuery 对象的重用方式

    for UserList userList UserList Component getInstance UserList class ScopeType METHOD userList getUserByEmailAddress emai
  • iPhone 旋转和全屏视频

    我遇到了一个奇怪的问题 需要帮助解决 我的应用程序始终以纵向模式运行 我明确希望它是这样的 在应用程序的一处 我有一个 UIWebView 它工作得很好 正如预期的那样 此 Web 视图并非始终显示 而是动态添加到主视图并根据用户操作删除
  • 如何加载本地JSON文件?

    我正在尝试通过 jquery 加载本地 JSON 文件 代码工作正常 但数据在数组中不可用 getJSON ajax data myjasonfile json function json console log json 我的控制台仅显示
  • 函数指针和返回类型转换

    假设我有一个执行一些副作用然后返回答案的函数 int foo perform some side effect return 42 我要绑定foo到函数指针 但我对答案不感兴趣 只是副作用 void bar foo 然而 这似乎是一个类型错
  • 正则表达式提取“--!!”之后的所有文本在 R dplyr 中

    我试图在 R 中使用 dplyr 来提取由变量的某些实例过滤的数据框中变量字符串后面的子字符串name在下面的例子中 我正在尝试将所需的结果传递到一个名为的新变量中income rent 我是正则表达式的新手 我的尝试是 income ca
  • 如何在 Perl 中进行字母数字排序?

    我有一个如下所示的文件 80 1p21 81 19q13 82 6p12 3 83 Xp11 22 84 3pter q21 86 3q26 33 87 14q24 1 q24 2 14q24 14q22 q24 88 1q42 q43 8
  • 在 GCP App Engine 标准环境上安装 cmake 的解决方法

    我需要安装dlib封装在应用程序引擎标准对于需要的应用程序cmake 以下是我在安装时遇到的错误 我尝试添加cmake and cmake setup在requirements txt中但没有用 ERROR Failed to build
  • 在 c# 2008 中使用正则表达式验证的电话号码验证?

    我想验证这种格式的电话号码 即 919981424199 91231456789 我正在使用 Asp net c 2008 来开发网站 为此 我使用了正则表达式验证控件 gt 属性 gt 验证表达式 0 9 0 9 但这接受号码为91998
  • Emacs 确定键盘布局

    Emacs 有没有办法检测当前的键盘布局 我经常用英语和德语写文本 切换 Win 操作系统 键盘布局 但是 某些功能 例如 C Y 应始终位于相同的物理键上 无论我当前使用哪种语言进行输入 Thanks 考虑使用M x set input
  • 使用 Firebase 和 APNs 身份验证密钥进行生产推送通知

    在 TestFlight 上测试我的应用程序时 我注意到我没有收到推送通知 我已确认 当从 Xcode 加载构建时 我可以收到从云函数和 firebase 控制台发起的通知 我引用了其他类似的问题 但没有一个反映我正在处理的确切问题 在 F
  • 如何将文件保存到 MongoDB?

    我想将用户选择的文件保存到 MongoDB 如何正确地将文件添加到 BSON 对象以便将其添加到 MongoDB 如果我的方法不正确 请指出正确的方向 下面是客户端代码 此 jQuery 函数收集每个输入字段上的文本 需要文件部分的帮助 并
  • Spring Boot 几分钟后停止解析视图

    我有一个 Spring Boot 应用程序 它突然停止解析视图 而是向我抛出 404 错误 这些是我的依赖项
  • 如何从代码隐藏中确定 ASP.NET 生成的 ID?

    在 ASP NET 中 当您为标签提供 ID 时 它会根据控件层次结构为该元素生成唯一的 HTML id 即
  • 如何在未聚焦时保持 WPF 文本框选择?

    我想在 WPF TextBox 中显示一个选择 即使它没有焦点 我怎样才能做到这一点 我已将此解决方案用于 RichTextBox 但我认为它也适用于标准文本框 基本上 您需要处理 LostFocus 事件并将其标记为已处理 protect
  • d3 强制定向图删除文本光标

    当我向 d3 力定向图形布局中的节点添加文本时 当我将鼠标悬停在该节点上时 鼠标指针会更改为文本光标 有没有办法避免这种情况并始终让它保持常规指针 普通指针 文本光标 这是一个fiddle http jsfiddle net pkerped