使用 D3.select 通过鼠标悬停更改径向树状图中文本的粗细答案

【问题标题】：Using D3.select to change the thickness of text in a radial dendrogram with a mouseover使用 D3.select 通过鼠标悬停更改径向树状图中文本的粗细
【发布时间】：2020-09-16 09:47:06
【问题描述】：

在帮助的帮助下，我发现了更改径向树状图中元素的方法。下面的行执行该功能。但是，我试图猜测我需要用相同的鼠标加粗文本。谁能告诉我我错过了什么？

// 鼠标悬停在节点上时负责改变节点的样式和类型

d3.selectAll('g.node').attr("id", function(d,i){ return "node"+i});
d3.selectAll('path.link').attr("id", function(d,i){ return "link"+i}); //my guess is on the line 
below
d3.selectAll('text').attr("id", function(d,i){ return "text"+i});

// 仍在试图弄清楚如何在鼠标悬停时使文本变为粗体

   d3.selectAll('g.node').each(function(d, i) {
   d3.select('#node'+i).on("mouseover", function() { 
   d3.select('#link'+(i-1))
   .attr('style','stroke-width: 4px','style','font-weight: bold');  // my 2nd guess is on the next 
line
   d3.select('text').attr("font-weight",function(d,i) {return i*800+800;});

}).on("mouseout", function() { d3.select('#link'+(i-1)).attr('style', 'stroke-width: 1.5px','stroke-opacity: 0.4','stroke: #555'); }); });

【问题讨论】：

标签： d3.js svg dendrogram radial

【解决方案1】：

为了设置font-weight - which is a CSS property -，应使用.style 而不是.attr：

d3.select('#link'+(i-1))
   .style('font-weight','bold');

有用的参考：modifying elements 和 d3-selection。

【讨论】：

感谢 Mehdi 与我们联系。我试过了，按照建议插入，
d3.select('#link'+(i-1)) .style('font-weight','bold') .attr('style','stroke-width: 4px' ,'stroke-opacity: 0.9','stroke: #000');
应该删除.attr('style',... 位。
你好 Mehdi——我最终创建了另一种 CSS 样式，.node text:hover，并增加了字体粗细。再次感谢您的回复。抱歉，之前没有看到您的回复。
很高兴知道，CSS规则其实是一个很好的解决方案，效率更高...

【解决方案2】：

（我仍在研究如何最好地使用这个平台）

但我的答案是创建一个名为 .node text:hover 的 CSS 类，然后增加该类中的字体粗细。

【讨论】：