HTML什么标签显示节点,html – d3节点标记

怼烎@ 2022-10-07 07:58 134阅读 0赞

有

lots of examples显示如何添加标签到图和树的可视化，但我可能从这个作为最简单的开始：

您尚未向您的代码发布链接，但我猜测该节点是指选择的SVG圈子元素。您不能将文本元素添加到圆形元素，因为圆形元素不是containers;将文本元素添加到圆形将被忽略。

通常，您使用G元素将圆形元素(或图像元素，如上所示)和每个节点的文本元素分组。生成的结构如下所示：

Gavroche

使用data-join为每个节点创建G元素，然后使用selection.append为每个节点添加一个圆和一个文本元素。这样的东西：

var node = svg.selectAll(".node")

.data(nodes)

.enter().append("g")

.attr("class", "node")

.call(force.drag);

node.append("circle")

.attr("r", 4.5);

node.append("text")

.attr("dx", 12)

.attr("dy", ".35em")

.text(function(d) \{ return d.name \});

这种方法的一个缺点是，你可能想要的标签绘制在圆的顶部。由于SVG还不支持z-index，元素按照文档顺序绘制;因此，上述方法使得在其圆圈上绘制标签，但是可以在其他圆圈下绘制。您可以通过使用两个数据连接并为圆和标签创建单独的组来解决此问题，如下所示：

…

Gavroche

Valjean

…

并相应的JavaScript：

var circle = svg.append("g")

.attr("class", "nodes")

.selectAll("circle")

.data(nodes)

.enter().append("circle")

.attr("r", 4.5)

.call(force.drag);

var text = svg.append("g")

.attr("class", "labels")

.selectAll("text")

.data(nodes)

.enter().append("text")

.attr("dx", 12)

.attr("dy", ".35em")

.text(function(d) \{ return d.name \});

这种技术在Mobile Patent Suits示例中使用(带有用于创建白色阴影的附加文本元素)。

发表评论取消回复

表情：

评论列表（有 0 条评论，134人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML DOM 节点元素操作

一，判断属性 hasAttribute(‘属性名’) ：判断是否有某个属性 //3,判断属性是否存在 console.log(h1.hasAttri...

悠悠/ 2024年04月19日 10:47/ 0 赞/ 85 阅读

相关 HTML DOM节点操作

一，节点内容 innerHTML设置节点内容 <body> <div id="div"> 节点内容 ...

绝地灬酷狼/ 2024年04月19日 09:35/ 0 赞/ 84 阅读

相关 HTML DOM节点选择器

一，id获得元素 <body> <div id="div"> id获得元素 </div> </...

港控/mmm°/ 2024年04月19日 09:34/ 0 赞/ 76 阅读

相关 HTML DOM节点概述

一，概述 DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 DOM 标准被分为 3 个不同的部分： 1. 核心 DOM ...

「爱情、让人受尽委屈。」/ 2024年04月19日 09:29/ 0 赞/ 88 阅读

相关 HTML什么标签显示节点,html – d3节点标记

有 lots of examples显示如何添加标签到图和树的可视化，但我可能从这个作为最简单的开始：您尚未向您的代码发布链接，但我猜测该节点是指选择的SVG圈子元素。您

怼烎@/ 2022年10月07日 07:58/ 0 赞/ 135 阅读

相关 JavaScript HTML DOM 元素（节点）

JavaScript HTML DOM 元素（节点） -------------------- 添加和删除节点（HTML 元素）。创建新的 HTML 元素如

梦里梦外;/ 2022年09月29日 14:51/ 0 赞/ 365 阅读

相关【前端】HTML基础3-HTML标签

超链接标签 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

素颜马尾好姑娘i/ 2022年08月30日 04:22/ 0 赞/ 252 阅读

相关 html标签中物理标记和逻辑标记区别

关于html标签中物理标记和逻辑标记区别因为两者所达到的效果一样，所以人们就没有太在意这两个到底有什么区别，那么今天我来告诉大家，是有区别的。它们的区别就再于一个

た入场券/ 2022年06月09日 05:59/ 0 赞/ 331 阅读

相关 HTML：HTML基本标记

第二章：HTML基本标记２.１HTML头部标记head 语法： <head>......</head> 说明：元素的作用范围是整篇文档，定义在HTML

Myth丶恋晨/ 2022年06月05日 04:05/ 0 赞/ 393 阅读

相关 html中childNodes节点属性

之前看html后对节点这个东西的盖帘一直很模糊，so在网上找了一本《DOM编程艺术》的PDF文档来看，编程试验了下

红太狼/ 2021年03月22日 13:30/ 0 赞/ 528 阅读