CODEWITHSUNDEEP
d3.jssvgdendrogramradial
Epistemic Data
Epistemic Data

Reputation: 19

Using D3.select to change the thickness of text in a radial dendrogram with a mouseover

With assistance, I've uncovered the way to change elements in a radial dendrogram. The lines below perform that function. However, I'm trying to guess at what I need to bold text with the same mouse over. Can someone tell me what I'm missing?

// responsible for changing the style and type of the nodes when mousing over them

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});

// still trying to figure out how to make the text bold on mouse over

   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'); }); });

Upvotes: 0

Views: 971

Answers (2)

Epistemic Data
Epistemic Data

Reputation: 19

(I'm still figuring how best to use this platform)

But my answer was to create a CSS class called, .node text:hover, then increase the font weight within that class.

Upvotes: 0

Mehdi
Mehdi

Reputation: 7403

In order to set font-weight - which is a CSS property -, .style should be used instead of .attr:

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

Useful reference: modifying elements with d3-selection.

Upvotes: 0

Related Questions