javascript - Style a d3 element with jQuery and CSS

Question

I have somehow a technical question. I would like to know if there is a possibility to style a d3 element with jQuery.

For instance a "Collatz Graph" example from the d3 site http://www.jasondavies.com/collatz-graph/ is producing a circle - like nodes with small labels.

In that case the numbers 1, 2, 3 and so on. The number is nothing more than a piece of code e.g.

 <text dy=".31em" text-anchor="start" transform="rotate(90)translate(8)">32</text>

How could I style this element with jQuery? e.g. adding a red border by clicking it?

Obviously I would need a class or id in the <text ... > and proceed as follows:

 $(".nome_class").click(function() {
    $(this).css( "border", "3px solid red" );
 }); 

In my code, both d3 is working (I can see a graph) and jQuery is working (I can for instance style or do something else with the regular HTML elements). BUT when I try style d3 element I get no result.

I will be very grateful for any hint or advice.

Answer 1

Yes you can, however when targeting <svg> elements, you must chose style properties such as stroke and fill. For example, in that site, if you open up your dev tools and paste/execute the following, you'll see the changes

$('circle').css('stroke', 'green')
$('circle').css('fill', 'red')

Edit

Per discussion you can attach event handlers on your <g> elements with jQuery and do whatever else you wish

$('g').click(function(e) {
    console.log($(this).children().closest('text').text());
    // do whatever else  
});