title: D3.js implement ellipsis for axis labels SVG
body: <p>Below is the code which is use to display the axis </p>
  
  <pre><code>var xScale = d3.scale.ordinal()
  .rangeRoundBands([0, totalWidth], barSpacing(optionsConfig.chart.barSpacing))
  .domain(chartData.map(function(d) {
      return d[xValue];
  }));
  // Assign Scale to X Axis
  xAxis.scale(xScale);
  </code></pre>
  
  <p>I want to show ellipsis on the x axis if the text is too long
  I am referring to <a href="https://stackoverflow.com/questions/15975440/add-ellipses-to-overflowing-text-in-svg">this</a> link which has the below solution</p>
  
  <pre><code>function wrap() {
          var self = d3.select(this),
              textLength = self.node().getComputedTextLength(),
              text = self.text();
          while (textLength &gt; (width - 2 * padding) &amp;&amp; text.length &gt; 0) {
              text = text.slice(0, -1);
              self.text(text + '...');
              textLength = self.node().getComputedTextLength();
          }
      } 
  text.append('tspan').text(function(d) { return d.name; }).each(wrap);
  </code></pre>
  
  <p>but can any one help me how to implement the above code as I am new to d3.js or please suggest if this can be done with CSS or SVG approach.</p>