0
function addpointo(lat,lon,text) {

  var gpoint = g.append("g").attr("class", "gpoint");
  var x = projection([lat,lon])[0];
  var y = projection([lat,lon])[1];

  gpoint.append("svg:circle")
        .attr("cx", x)
        .attr("cy", y)
        .attr("class","point")
        .style("fill","purple")
        .attr("r", 1.5);

  //conditional in case a point has no associated text
  if(text.length>0){

    gpoint.append("text")
          .attr("x", x+2)
          .attr("y", y+2)
          .attr("class","text")
          .text(text);
  }

}

This function display the text into the correct position of the map based on latitude and longitude. The problem is that when I have multiple result for the same latitude and longitude the text is one on top of the other and it becomes a mess. Do you know how can I format correctly each text avoiding them to get one on top of the other?

Matteo Maria Fiore
  • 1
  • 1
    Duplicate of: http://stackoverflow.com/a/23373686/16363 – Mark Mar 29 '16 at 18:11
  • in the other post they need to label different things, I need to label the same point multiple times with different values – Matteo Maria Fiore Mar 29 '16 at 19:00
  • It's the same concept though. You place the label, you get the bounding box of that label, you check it against other labels bounding box to see if there's overlap, if so, you move the label. Rinse and repeat until there's no overlap... – Mark Mar 29 '16 at 19:41

0 Answers0