How to scale text in a D3 bubble chart

Question

I have a working, zoomable D3 bubble chart.

See fiddle here .

var theData = {
  children:[{"source":3,"value":2367257,"formattedValue":"€2,367,257","name":"Legacies","tooltip":"Legacies: €2,367,257","colour":"#3182bd","$$hashKey":"object:106"},{"source":4,"value":1199595,"formattedValue":"€1,199,595","name":"Donations including donations in kind","tooltip":"Donations including donations in kind: €1,199,595","colour":"#6baed6","$$hashKey":"object:101"},{"source":2,"value":1154618,"formattedValue":"€1,154,618","name":"Tax relief income","tooltip":"Tax relief income: €1,154,618","colour":"#9ecae1","$$hashKey":"object:110"},{"source":2,"value":81447065,"formattedValue":"€81,447,065","name":"Grants and service fees from government sources","tooltip":"Grants and service fees from government sources: €81,447,065","colour":"#c6dbef","$$hashKey":"object:104"},{"source":3,"value":151798455,"formattedValue":"€151,798,455","name":"Non-government grants and donations","tooltip":"Non-government grants and donations: €151,798,455","colour":"#e6550d","$$hashKey":"object:108"},{"source":4,"value":15039907,"formattedValue":"€15,039,907","name":"Memberships and subscriptions","tooltip":"Memberships and subscriptions: €15,039,907","colour":"#fd8d3c","$$hashKey":"object:107"},{"source":2,"value":278004,"formattedValue":"€278,004","name":"Church collection","tooltip":"Church collection: €278,004","colour":"#fdae6b","$$hashKey":"object:100"},{"source":4,"value":113941393,"formattedValue":"€113,941,393","name":"Unspecified voluntary income","tooltip":"Unspecified voluntary income: €113,941,393","colour":"#fdd0a2","$$hashKey":"object:114"},{"source":1,"value":22890793,"formattedValue":"€22,890,793","name":"Fundraising events and activities","tooltip":"Fundraising events and activities: €22,890,793","colour":"#31a354","$$hashKey":"object:103"},{"source":1,"value":10713266,"formattedValue":"€10,713,266","name":"Charity shop income","tooltip":"Charity shop income: €10,713,266","colour":"#74c476","$$hashKey":"object:99"},{"source":2,"value":3800759,"formattedValue":"€3,800,759","name":"Unspecified activities for generating funds","tooltip":"Unspecified activities for generating funds: €3,800,759","colour":"#a1d99b","$$hashKey":"object:112"},{"source":2,"value":26174523,"formattedValue":"€26,174,523","name":"Investment income (including deposit interest)","tooltip":"Investment income (including deposit interest): €26,174,523","colour":"#c7e9c0","$$hashKey":"object:105"},{"source":3,"value":1605097,"formattedValue":"€1,605,097","name":"Unspecified incoming resources from generated funds","tooltip":"Unspecified incoming resources from generated funds: €1,605,097","colour":"#756bb1","$$hashKey":"object:113"},{"source":1,"value":150535745,"formattedValue":"€150,535,745","name":"Fees and income from trading activities","tooltip":"Fees and income from trading activities: €150,535,745","colour":"#9e9ac8","$$hashKey":"object:102"},{"source":1,"value":14580809,"formattedValue":"€14,580,809","name":"Other activities","tooltip":"Other activities: €14,580,809","colour":"#bcbddc","$$hashKey":"object:109"},{"source":4,"value":147269606,"formattedValue":"€147,269,606","name":"Uncategorized and other income","tooltip":"Uncategorized and other income: €147,269,606","colour":"#dadaeb","$$hashKey":"object:111"}]
};

function randomComparator (a, b) {
  return Math.floor(Math.random() * 10) + 1  
}

function clipText (d, t) {

    if (d.r < 40) {
    return "";
  }

  var name = t.substring(0, d.r / 5);
  if (name.length < t.length) {
    name = name.substring (0, name.length - Math.min(2, name.length)) + "...";
  }

  return name;

}

var diameter = 577,
    width = 577,
    height = diameter,
    format = d3.format(",d");

var bubble = d3.layout.pack()
.sort(randomComparator)
.size([width, height])
.padding(3);

var svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", diameter)
.attr("class", "bubble");

var container = svg.append("g");

var node = container.selectAll(".node")
.data(bubble.nodes(theData)
      .filter(function(d) { return !d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
  return "translate(" + d.x + "," + d.y + ")";
});

node.append("title")
  .text(function(d) {
  return d.name + ": €" + format(d.value);
});

node.append("circle")
  .attr("r", function(d) { return d.r; })
  .style("fill", function(d) {
  return d.colour;
  //return color(d.source);
})
  .style("pointer-events", "all");

var text = node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.style("fill", "#fff");

text.append("tspan")
  .attr("x", "0")
  .attr("dy", "0")
  .style("font-weight", "600")
  .text(function(d) {
  return clipText(d, d.formattedValue);
});

text.append("tspan")
  .attr("x", "0")
  .attr("dy", "1.2em")
  .text(function(d) {
  return clipText(d, d.name);
});


// Setup zooming

function zoomed() {
  container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

var zoom = d3.behavior.zoom()
.scaleExtent([-10, 50])
.on("zoom", zoomed);

zoom(svg);

However, not all the bubbles have descriptive text in them, as the text wont fit inside the radius of the bubble; My "algorithm" is pretty blunt; I either don't return any text if the radius is too small or I truncate it.

How do I scale the text so that it shows up when I zoom in?

TIA, Jeff

Answer 1

Managed to solve it I think. Basically what you wanted to do was when zooming show more and more of the name yes ?

So what I did was when zooming, get the scale and change the font size and the amount of letters that get outputted via your 'cliptext' function depending on the scale value. I also used a general fontsize so the sizing stays consistent.

Updated fiddle : https://jsfiddle.net/24y0qL5e/7/

I changed the cliptext function to get a scale value :

function clipText (d, t, scale) {  

  if (d.r < fontsize/scale) {
    return "";
  }
console.log(scale)
  var name = t.substring(0, d.r/scale);
  if (name.length < t.length) {
    name = name.substring (0, name.length - Math.min(2, name.length)) + "...";
  }

  return name;

}

I added a class for the text that you wish to change just so it's easily selected in future :

text.append("tspan").attr('class', "nodeTextToClip") //added class
  .attr("x", "0")
  .attr("dy", "1.2em").style("font-size", fontsize)
  .text(function(d) {
  return clipText(d, d.name,8);

And then changed the size of the text and amount of letters outputted by the cliptext function like so:

    d3.selectAll('.node text .nodeTextToClip') //select text that you want to change
.style('font-size', fontsize/scale).text(function(d){return clipText(d, d.name,fontsize/scale/3 );})

This is just a quick try out, obviously there is some simple changes that need to be made, but I think this should help you get an idea of what's needed :)