Sosa Sosa -5 years ago 174
CSS Question

d3 keeping text from extending outside of SVG

I have line chart generated through D3, and the text appears to the right of the pointer on hover. The problem is the text that appears on the far right is cut off by the edge of the SVG. I know a simple

would allow it to appear outside, but I want it to stay inside the SVG. Is this possible?

enter image description here

Answer Source

You can use this technique:

enter image description here

  • If cursor is on A zone: align your text or tooltip to the right
  • If cursor is on B zone: align your text or tooltip to the left

Use (svg_width / 2) to get the middle ("text-anchor", function () {
     var position = d3.mouse();  // position[0] <= x    position[1]  <= y
     if (position[0] < (svg_width/2) ) {
            // you are on A zone
            return "start";
     } else {
            // you are on B zone
            return "end";
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download