The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

529486 (7) [Avatar] Offline
#1
Hi,

Could someone explain the use of $ in this line:

const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);

found here: https://bl.ocks.org/curran/f4ca72a38bcbb5893d37ce48ed9d4796

Thanks!

stevegw (39) [Avatar] Offline
#2
The $ is a jquery selector

$(selector).action() A $ sign to define/access jQuery. A (selector) to "query (or find)" HTML elements. A jQuery action() to be performed on the element(s)

https://www.w3schools.com/jquery/jquery_syntax.asp
529486 (7) [Avatar] Offline
#3
Thanks. I assume that means the non-jQuery way of accessing margin.left and margin.top would be more complicated...
stevegw (39) [Avatar] Offline
#4
document.getElementById("svg").style.marginTop
529486 (7) [Avatar] Offline
#5
Awesome, thanks!
529486 (7) [Avatar] Offline
#6
Actually, to answer my own question, since the reference in my example is to the variable margin, not the value of the svg.marginTop, the equivalent non-jQuery alternative would be:

const g = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');