How to shrink Text Labels and add attributes to hover info-window in D3 bubble chart?

Question

How would I be able to shrink or clip text labels so very long id's are not larger then the bubbles in my chart?

Additionally, how do I add additional attributes from my csv to show within the info window when hovering over the bubble? I was assuming this was done in the line of code below, however, it returns as undefined when I run it. I want to add attributes for Author and Genre.

node.append("title")
  .text(function(d) { return d.id + "\n" + "Pages: " +format(d.value); });
});

Here is my plunker for the full code: https://plnkr.co/edit/nWPuZgZaomSSKSuY6sNB?p=preview

Answer 1

Here is part of the answer, your Genre and Author fields are tucked away under data.

return d.id + "\n" + "Pages: " + format(d.value) + "\n" +
"Author: " + d.data.Author + "\n" + "Genre: " + d.data.Genre;

https://plnkr.co/edit/lEHToojJ8YzUoVSxE7cr?p=preview